@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

/* ===== CSS Variables ===== */
:root {
    --primary-color: #2E3192;
    --secondary-color: #FF6B4A;
    /* Pastel tints sampled/derived from logo colors (approximate)
       If you want exact sampling, provide the hexes or allow image sampling. */
    --logo-pastel-primary: #fffbf8; /* soft tint of --primary-color */
    --logo-pastel-secondary: #f3f7ff; /* soft tint of --secondary-color */
    --logo-pastel-accent: #f4fdff; /* light cyan accent */
    --text-dark: #1a1a1a;
    --text-light: #666;
    --text-medium: #555;
    --bg-light: #f8f9fa;
    --bg-lighter: #fafbfc;
    --white: #ffffff;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    --transition: all 0.3s ease;
    --transition-smooth: all 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    --success-color: #4CAF50;
    --error-color: #f44336;
    --warning-color: #ff9800;
    /* Responsive wheel and card sizing (use clamp to scale with viewport) */
    --wheel-size: clamp(260px, 34vw, 800px); /* used for the services wheel container (base) */
    --card-width: clamp(260px, 30vw, 520px);  /* width of the cards container (base) */
    --card-height: clamp(415px, 50vh, 680px); /* height for cards area (base) */
    /* Per your request: scale factors applied to base sizes */
    --wheel-scale: 1.2;  /* increase wheel by 20% */
    --card-scale: 1.5;   /* increase cards by 50% (was 1.35) */
}

/* Headline font removed: local file missing; use Montserrat from Google Fonts to avoid 404s */


/* ===== Envelope Animation Support ===== */
.envelope {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.envelope__content,
.envelope__pane--top,
.envelope__pane--bottom,
.envelope__flap,
.envelope__shell {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.envelope__pane--top,
.envelope__pane--bottom {
    will-change: transform, opacity;
}

.envelope__flap {
    will-change: transform, opacity;
    transform-origin: top center;
}

.envelope__shell {
    opacity: 0; /* revealed during animation */
}

.envelope.is-folded .envelope__content,
.envelope.is-folded .envelope__pane--top,
.envelope.is-folded .envelope__pane--bottom {
    visibility: hidden;
}

.envelope__tag {
    opacity: 0; /* revealed during animation */
    will-change: transform, opacity;
}



/* ===== Articles Section Styling (Redesigned) ===== */
.articles-section {
    padding: 6rem 0;
    background: #f8f9fa;
    overflow-x: hidden;
}

.articles-section .container {
    max-width: 1300px;
    padding: 0 20px;
}

.article-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8rem;
    position: relative;
}

.article-row:last-child {
    margin-bottom: 0;
}

/* Image Styling */
.article-row .article-image {
    flex: 0 0 55%;
    max-width: 55%;
    position: relative;
    z-index: 1;
    overflow: hidden; /* contain parallax movement */
}

.article-row .article-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    will-change: transform;
    transform: translate3d(0,0,0); /* establish composite layer */
    transition: transform 220ms ease-out; /* gentle transition for hover/focus */
}

.article-row:hover .article-image img {
    transform: scale(1.02);
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .article-row .article-image img {
        transition: none !important;
        will-change: auto;
        transform: none !important;
    }
}

/* Disable parallax on small screens for performance and UX */
@media (max-width: 768px) {
    .article-row .article-image img {
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
}

/* Content Box Styling */
.article-row .article-content {
    flex: 0 0 50%;
    max-width: 50%;
    background: #ffffff;
    padding: 3.5rem;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
    z-index: 2;
    position: relative;
    margin-left: -5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Reverse Layout */
.article-row.reverse {
    flex-direction: row-reverse;
}

.article-row.reverse .article-content {
    margin-left: 0;
    margin-right: -5%;
}

/* Typography & Spacing */
.article-label {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    background: rgba(46, 49, 146, 0.1);
    color: var(--primary-color);
}

.article-content h3 {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
    color: var(--text-dark);
    line-height: 1.2;
}

.article-content p {
    font-size: 1.1rem;
    color: var(--text-medium);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.article-content ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.article-content ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--text-dark);
    font-weight: 500;
}

.article-content ul li::before {
    content: "•";
    color: var(--secondary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

.article-note {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-light);
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

/* ===== Article separators ===== */
.articles-section .article-row + .article-row {
    border-top: 2px solid rgba(46,49,146,0.20); /* primary color (stronger) */
    padding-top: 4rem;
    margin-top: 4rem;
    position: relative;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* decorative pseudo-element removed to keep a single clean divider line */

@media (max-width: 992px) {
    .articles-section .article-row + .article-row {
        padding-top: 3rem;
        margin-top: 3rem;
    }
    .articles-section .article-row + .article-row::before { width: 100px; height: 4px; top: -4px; }
}

/* ===== Intro Overlay (first-visit animation) ===== */
.intro-overlay {
     position: fixed;
     inset: 0;
     background: #ffffff;
     display: none; /* toggled to flex by JS when needed */
     align-items: center;
     justify-content: center;
     z-index: 9999;
     opacity: 0;
     transition: opacity 0.5s ease;
}

/* While splash is active, pause animations to prevent visual movement behind overlay */
body.splash-active * {
    animation-play-state: paused !important;
}

/* Specifically hide hero visuals while splash is active to prevent any movement behind overlay */
body.splash-active .hero {
    visibility: hidden;
}
body:not(.splash-active).hero-visible .hero,
body.hero-visible .hero {
    visibility: visible;
}

.intro-center {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
}

.intro-logo {
    width: clamp(120px, 20vw, 220px);
    height: auto;
    will-change: transform, opacity;
    transform: scale(1);
    transition: transform 0.9s ease; /* smooth zoom in */
}

.intro-text {
     font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     font-size: clamp(1rem, 2.4vw, 1.5rem);
     color: var(--text-dark);
     opacity: 0.9;
}

.intro-text.fade-out {
    opacity: 0;
    transition: opacity 0.9s ease;
}

/* Zoom-in class applied by JS after text fades */
.intro-logo.zoom-in {
    transform: scale(1.8);
}

/* Ensure navbar logo overlap feels seamless */
.navbar .logo {
     width: clamp(80px, 10vw, 120px);
     height: auto;
}

@media (max-width: 576px) {
    .articles-section .article-row + .article-row {
        padding-top: 1.8rem;
        margin-top: 1.8rem;
        border-top-width: 2px;
    }
    .articles-section .article-row + .article-row::before { width: 60px; height: 3px; top: -4px; }
}

/* Topic Colors (Accents) */
.article-row.topic--blue .article-content { border-top: 6px solid #2196F3; }
.article-row.topic--blue .article-label { color: #2196F3; background: rgba(33, 150, 243, 0.1); }

.article-row.topic--lightblue .article-content { border-top: 6px solid #03A9F4; }
.article-row.topic--lightblue .article-label { color: #03A9F4; background: rgba(3, 169, 244, 0.1); }

.article-row.topic--orange .article-content { border-top: 6px solid #FF9800; }
.article-row.topic--orange .article-label { color: #FF9800; background: rgba(255, 152, 0, 0.1); }

.article-row.topic--white .article-content { border-top: 6px solid #E91E63; }
.article-row.topic--white .article-label { color: #E91E63; background: rgba(233, 30, 99, 0.1); }

.article-row.topic--white-accent .article-content { border-top: 6px solid #9C27B0; }
.article-row.topic--white-accent .article-label { color: #9C27B0; background: rgba(156, 39, 176, 0.1); }

/* All articles use secondary color */
.articles-section .article-row .article-content { border-top: 6px solid var(--secondary-color); }
.articles-section .article-row .article-label { color: var(--secondary-color); background: rgba(255,107,74,0.08); }

/* Responsive */
@media (max-width: 992px) {
    .article-row {
        flex-direction: column !important;
        margin-bottom: 4rem;
    }

    .article-row .article-image,
    .article-row .article-content {
        flex: 0 0 100%;
        max-width: 100%;
        margin: 0;
    }

    .article-row .article-image img {
        height: 250px;
        border-radius: 24px 24px 0 0;
        object-fit: cover;
    }

    .article-row .article-content {
        margin-top: -40px;
        border-radius: 24px;
        padding: 2.5rem;
        width: 90%;
    }
}

@media (max-width: 576px) {
    .articles-section {
        padding: 3rem 0;
    }

    .article-content h3 { 
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .article-row .article-content { 
        padding: 1.5rem;
        width: 95%;
        margin-top: -30px;
    }

    .article-content p {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .article-label {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
    }
}

@media (max-width: 768px) {
    /* Hide the services/wheel section entirely on mobile (Danish `#ydelser` and English `#services`) */
    #ydelser, #services, section#ydelser, section#services {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}


/* ===== Mobile Viewport Optimization ===== */
@media (max-width: 768px) {
    /* Prevent text size adjustment on orientation change */
    html {
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Improve tap targets */
    a, button, input, select, textarea {
        -webkit-tap-highlight-color: rgba(46, 49, 146, 0.2);
    }

    /* Smooth scrolling on mobile */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Reset & Base Styles ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

body.menu-open {
    overflow: hidden;
}

.container {
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 7rem; /* increased size */
    font-weight: 700;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.4rem;
        line-height: 1.3;
    }

    h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    p {
        font-size: 1rem;
    }

    .container {
        padding: 0 16px;
    }
}

h2 {
    font-size: 2.8rem; /* increased size */
    text-align: center;
    margin-bottom: 3rem;
    color: var(--primary-color);
    font-weight: 700;
}

h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
}

p {
    margin-bottom: 1rem;
    color: #555; /* darker */
    font-size: 1.1rem; /* larger */
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

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

@media (max-width: 768px) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ===== Navigation ===== */
.navbar {
    background: var(--white);
    box-shadow: var(--shadow);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 1rem 0;
    transition: transform 0.3s ease-in-out;
}

.navbar.navbar--hidden {
    transform: translateY(-100%);
}

/* When navbar is hidden (moved off-screen) ensure any dropdowns are not visible
   This prevents dropdowns from remaining visible if they were open when the navbar
   is hidden (e.g. when scrolling up on the hero). */
.navbar.navbar--hidden .lang-dropdown .dropdown-menu {
    display: none !important;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 60px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 1.6rem; /* slightly reduced so items sit closer together */
    align-items: center;
    list-style: none;
    transform: translateX(-30px); /* nudge nav items 30px left on desktop */
    transition: transform 150ms ease;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    transition: var(--transition);
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile menu overlay */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-overlay.active {
    display: block;
    opacity: 1;
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 280px;
        flex-direction: column;
        background: var(--white);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        padding: 6rem 2rem 2rem;
        transition: right 0.3s ease;
        z-index: 1000;
        transform: none; /* reset desktop nudge on mobile slide-in menu */
        gap: 2rem;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 1rem 0;
        font-size: 1.1rem;
    }

    .lang-switch {
        margin-top: 1rem;
        text-align: center;
    }
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-links a {
    color: var(--text-dark);
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0;
    text-decoration: none;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--primary-color);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    transition: var(--transition);
}

.nav-links a:hover::after {
    width: 100%;
}

.lang-switch {
    background: var(--primary-color);
    color: var(--white) !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 25px;
    font-weight: 600;
}

.lang-switch:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

.lang-switch::after {
    display: none;
}

/* ===== Navbar CTA and Language Dropdown ===== */
.nav-cta {
    /* Navbar-friendly primary CTA:
       - Compact pill that fits the navbar height
       - Shorter vertically, longer horizontally for 'kontakt' visual weight */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--secondary-color);
    color: var(--white) !important;
    padding: 0.25rem 1.35rem; /* less vertical, more horizontal */
    min-height: 36px; /* slightly shorter vertically */
    border-radius: 999px; /* fully rounded */
    font-weight: 600;
    font-size: 0.98rem; /* slightly smaller than hero */
    box-shadow: 0 6px 16px rgba(46,49,146,0.06); /* subtle branded shadow */
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    border-width: 6px 14px; /* top/bottom 6px (shorter vertically), left/right 14px (longer horizontally) */
    border-style: solid;
    border-color: rgba(255,107,74,0.95);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
}

.nav-cta:visited,
.nav-cta:active {
    color: var(--white) !important;
}

.nav-cta:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px); /* smaller lift to keep nav stable */
    box-shadow: 0 12px 28px rgba(46,49,146,0.10);
    color: var(--white) !important;
}

.nav-cta:active {
    transform: translateY(0);
}

.nav-cta:focus-visible {
    outline: 3px solid rgba(46,49,146,0.12);
    outline-offset: 3px;
}

/* Ensure the underline pseudo-element from `.nav-links a::after` stays hidden for CTA */
.nav-links a.nav-cta::after,
.nav-cta::after {
    display: none !important;
}

/* Responsive tweak: slightly smaller on very small screens */
@media (max-width: 480px) {
    .nav-cta {
        padding: 0.25rem 1rem;
        min-height: 32px;
        font-size: 0.95rem;
    }
}

/* Remove the underline pseudo-element used for regular nav links on the CTA */
.nav-links a.nav-cta::after,
.nav-cta::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}

.lang-dropdown {
    position: relative;
}

.lang-dropdown .dropdown-toggle {
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-weight: 500; /* match regular navbar link weight */
    font-family: inherit; /* ensure same font as other navbar links */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0; /* match nav link vertical spacing */
    border-radius: 8px;
    font-size: 1rem; /* match navbar link size */
    line-height: 1.2;
}

.lang-dropdown .dropdown-menu {
    position: absolute;
    left: 0;
    right: auto;
    top: calc(100% + 8px);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    border-radius: 10px;
    padding: 0.25rem; /* tighter padding to reduce overall size */
    width: max-content; /* fit to content, avoid extra right-side space */
    min-width: unset; /* override fixed min-width */
    white-space: nowrap;
    list-style: none; /* remove default bullets */
    padding-left: 0;   /* remove left padding that creates space for markers */
    margin: 0;
    display: none;
    z-index: 1100;
}

.lang-dropdown .dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lang-dropdown.open .dropdown-menu {
    display: block;
}

.lang-dropdown .dropdown-menu a {
    display: inline-flex; /* ensure flag sits left of text */
    align-items: center;
    gap: 8px;
    padding: 0.45rem 0.6rem; /* slightly smaller horizontal padding */
    color: var(--text-dark);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500; /* match regular navbar link weight */
    font-family: inherit; /* match navbar font */
    font-size: 1rem; /* match navbar link size */
    white-space: nowrap; /* prevent wrapping inside items */
    width: 100%; /* make each item stretch to full menu width */
    box-sizing: border-box; /* include padding in width calculation */
    text-align: left; /* keep flag and text aligned to left */
}
.lang-dropdown .dropdown-menu a img.flag {
    display: inline-block;
    width: 18px;
    height: 12px;
}

.lang-dropdown .dropdown-menu a:hover {
    background: rgba(46,49,146,0.04);
    color: var(--primary-color);
}

/* Make dropdown behave inside mobile slide-in menu */
@media (max-width: 768px) {
    /* Mobile: make language dropdown behave like an accordion */
    .lang-dropdown { width: 100%; }
    .lang-dropdown .dropdown-toggle {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0.75rem;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 10px;
        background: #f9fafb;
    }
    .lang-dropdown .dropdown-menu {
        position: static;
        display: none; /* hidden until .open */
        padding: 0.25rem 0;
        background: transparent;
        box-shadow: none;
        min-width: 0;
        list-style: none; /* ensure no bullets in mobile menu */
        padding-left: 0;
        margin-top: 0.5rem;
        border-left: 3px solid var(--primary-color);
    }
    .lang-dropdown.open .dropdown-menu { display: block; }
    .lang-dropdown .dropdown-menu a {
        padding: 0.75rem 0.75rem 0.75rem 0.75rem;
        border-radius: 8px;
    }
}

/* ===== Hero Section ===== */
.hero {
    position: relative;
    padding: 6rem 0;
    background: var(--bg-light);
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-image-background,
.hero-image-foreground {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: right center;
}

.hero-image-background {
    z-index: 0;
}

.hero-image-foreground {
    /* sit visually above the background but below the hero text
       (text has higher z-index). Lowering this prevents the image
       from overlapping the headline on some desktop setups */
    z-index: 1;
    transform: translateX(100%);
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Mobile portrait placeholder: hidden by default, enabled only on small screens */
.hero-portrait-mobile {
    display: none;
}

.hero-visible .hero-image-foreground {
    /* reduce how far the foreground slides left so it doesn't cover text
       on wider screens; fine-tuned values below via a large-screen media query */
    transform: translateX(calc(-8%));
    transition-delay: 0.2s;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);  /* mørk overlay */
    z-index: 0;
}

/* White panel that sits on top of the background image but below the hero text */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%; /* white space takes up 50% from the left */
    background: var(--bg-lighter);
    z-index: 1; /* above the dark overlay but below the text */
    pointer-events: none; /* ensure underlying elements remain interactive */
}

.hero-content {
    position: relative; /* så tekst ligger over overlay */
    /* raise text stacking so it always appears above the foreground image */
    z-index: 5; /* ensure text and CTAs sit above the white panel and foreground */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
}

/* Move hero text down a bit for better visual balance. Use clamp so
   it scales between small and large screens. */
.hero-text {
    padding: 0 3rem; /* keep text inside white space with some horizontal padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* stack from the left within the white panel */
    text-align: left;
    max-width: 720px; /* prevent the headline from stretching too wide */
    margin-left: 0;
}
@media (max-width: 768px) {
    .hero {
        padding: 5rem 0 3rem;
        min-height: 100vh;
        height: auto;
        background: var(--bg-lighter);
    }

    .hero::before {
        display: none;
    }

    .hero::after {
        display: none;
    }

    .hero-image-background,
    .hero-image-foreground {
        display: none;
    }

    /* Show the circular portrait on mobile only. Move the image inside the frame
       by adjusting `object-position` so the head is fully visible without altering
       the frame size. Center horizontally. */
    .hero-portrait-mobile {
        display: block;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        object-fit: cover;
        /* lower the image inside the circular crop so the top of the head is visible */
        object-position: center 42%;
        box-shadow: var(--shadow-lg);
        border: 4px solid var(--white);
        margin-bottom: 1rem;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 2rem;
    }

    .hero-text {
        padding: 0 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .hero-text h1 {
        color: var(--primary-color);
        text-shadow: none;
        font-size: 2rem !important;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1rem;
        color: var(--text-dark);
    }

    .cta-button {
        padding: 1rem 2.5rem;
        font-size: 1rem;
        min-height: 48px;
    }
}

.hero-text h1 {
    margin-bottom: 1rem;
    color: var(--primary-color);
    font-size: clamp(2.6rem, 6vw, 4.2rem); /* smaller than the global h1 and responsive */
    line-height: 1.05;
}

/* ===== Hero scroll indicator (down arrow) ===== */
.hero-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    width: 54px;
    height: 54px;
    display: inline-flex; /* visible when hero is present (intro overlay manages visibility) */
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    box-shadow: var(--shadow-lg);
    color: var(--primary-color);
    border: 1px solid rgba(46,49,146,0.06);
    transition: transform 0.18s ease, opacity 0.18s ease;
    z-index: 20; /* ensure the indicator sits above hero content and images */
}

.hero-scroll-indicator:focus,
.hero-scroll-indicator:hover {
    transform: translateX(-50%) scale(1.03);
}

.hero-scroll-icon {
    stroke: currentColor;
    fill: none;
    width: 20px;
    height: 20px;
    display: block;
    transition: transform 0.3s ease;
}

@keyframes hero-icon-bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(6px); }
    100% { transform: translateY(0); }
}

.hero-scroll-icon {
    animation: hero-icon-bounce 1.6s ease-in-out infinite;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-icon { animation: none; }
}

.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

@media (max-width: 480px) {
    .hero-scroll-indicator { bottom: 18px; width: 44px; height: 44px; }
    .hero-scroll-icon { width: 18px; height: 18px; }
}

/* About section decorative vertical waves (subtle, non-interactive) */
.about {
    position: relative;
}
.about .container {
    position: relative;
    z-index: 2; /* keep content above decorative SVGs */
}
/* Decorative side SVG waves removed. */

/* ===== Redesigned About Section (new circle-stack visual) ===== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr min(480px, 42%);
    gap: 2.5rem;
    align-items: center;
}

/* about-visual (legacy) removed — replaced by .about-bio layout */



.about-text.enhanced p { margin-bottom: 1rem; }

.about-features {
    margin: 1.25rem 0 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.9rem;
}

.feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(255,255,255,0.96);
    padding: 0.9rem 1rem;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}

.feature h4 { margin: 0 0 0.25rem 0; font-size: 1rem; color: var(--primary-color); }
.feature p { margin: 0; color: var(--text-light); font-size: 0.95rem; }

@keyframes floatUp {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* Responsive adjustments */
@media (max-width: 968px) {
    .about-grid { grid-template-columns: 1fr; }
    .portrait { width: 220px; height: 220px; }
    .about-quote { position: static; margin-top: 1rem; right: auto; bottom: auto; }
    .about-features { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .portrait { width: 160px; height: 160px; border-radius: 12px; }
    .about-features { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* About layout overrides: let the SVG cluster fill the section and improve readability */
@media (min-width: 968px) {
    .about-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        align-items: stretch;
    }
    /* legacy .about-visual removed */
    .about-body { display:flex; flex-direction:column; justify-content:center; }
}
@media (max-width: 968px) {
    /* no legacy SVG rules */
}

/* Staged hero reveal: headline first, then subtitle, then CTA */
.hero-text h1,
.hero-text .hero-subtitle,
.hero-text .cta-button {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms ease-out, transform 760ms cubic-bezier(.2,.8,.2,1);
}

/* When `hero-visible` is added to body, reveal elements with staggered delays */
.hero-visible .hero-text h1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.hero-visible .hero-text .hero-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.95s;
}

.hero-visible .hero-text .cta-button {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.3s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-text h1,
    .hero-text .hero-subtitle,
    .hero-text .cta-button,
    .hero-image-foreground {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

/* Large-screen tweak: on very wide desktops, keep the foreground further to the right
   so it doesn't intrude into the hero text area. Adjust values as needed. */
@media (min-width: 1400px) {
    .hero-visible .hero-image-foreground {
        transform: translateX(calc(-4%));
    }
}

.highlight {
    color: var(--secondary-color);
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--text-dark);
}

.cta-button {
    display: inline-block;
    background: var(--secondary-color);
    color: var(--white);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: var(--shadow);
    transition: var(--transition-smooth);
    border: 2px solid var(--secondary-color);
    cursor: pointer;
    text-decoration: none;
}

.cta-button:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.cta-button:active {
    transform: translateY(-1px);
}

.cta-button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hero-image img {
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    object-fit: cover;
}

/* ===== About Section (Timeline Redesign) ===== */
.about-timeline-section {
    padding: 3rem 0; /* reduced vertical padding so wheel sits closer */
    background: var(--bg-lighter);
    position: relative;
    overflow: hidden;
}

/* Subtle upward shadow so the "Om Dorte" section visually sits above the hero */
.about-timeline-section::before {
    content: "";
    position: absolute;
    top: -40px; /* reach up over the hero */
    left: 0;
    right: 0;
    height: 56px;
    pointer-events: none;
    z-index: 3; /* sit above hero content */
    background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.08) 45%, rgba(0,0,0,0));
    filter: blur(8px);
    transform: translateZ(0);
}

@media (max-width: 768px) {
    .about-timeline-section::before {
        top: -28px;
        height: 36px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.06) 45%, rgba(0,0,0,0));
        filter: blur(6px);
    }
}

.timeline-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem auto;
    font-size: 1.2rem;
    color: var(--text-light);
}

.timeline-container {
    position: relative;
    width: 67vw;
    margin-left: calc(50% - 33.5vw);
    padding: 2rem 0;
}

/* Timeline Items */
.timeline-item {
    position: relative;
    width: 100%;
    padding-bottom: 4rem; /* Space for the connector curve */
    opacity: 0; /* For animation */
    transform: translateY(20px);
    transition: all 0.6s ease-out;
    box-sizing: border-box;
}

.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Markers */
.timeline-marker {
    position: absolute;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--white);
    border: 5px solid var(--primary-color);
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 0 4px rgba(46, 49, 146, 0.1);
    transition: transform 0.3s ease, background-color 0.3s ease;
}



.timeline-item:hover .timeline-marker {
    transform: scale(1.2);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Content Box */
.timeline-content {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 24px;
    border: 2px solid var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    width: 40%; /* Slightly narrower to allow for wide snake */
    max-width: 650px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease;
    z-index: 2;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--secondary-color);
}

/* Ensure the content border follows the marker when the item is hovered
   or focused (keyboard users) so the marker and card border match */
.timeline-item:hover .timeline-content,
.timeline-item:focus-within .timeline-content {
    border-color: var(--secondary-color);
}

.timeline-content h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.timeline-content p {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-medium);
    font-weight: 500;
}

/* Connector Lines (The Snake) */
/* We use ::before on the item to draw the line to the NEXT item */
.timeline-item::before {
    content: '';
    position: absolute;
    z-index: 1;
    border-color: var(--primary-color); /* Fallback */
    border-style: solid;
    border-width: 0;
    pointer-events: none;
}

/* LEFT Item Configuration */
.timeline-item.left .timeline-marker {
    left: 32%; /* center over the card (12% margin + half of 40% width = 32%) */
}

.timeline-item.left .timeline-content {
    margin-left: 12%; /* Push content to the right of the marker */
    text-align: left;
}

/* Connector for Left Item: Goes from 5% (Left) to 95% (Right) */
.timeline-item.left::before {
    top: 14px; /* start at marker center */
    left: calc(32% + 14px); /* start at visual center of marker (32% + half marker width) */
    width: 36%; /* shorter span between centered markers */
    height: 100%;
    border-top-width: 6px;
    border-right-width: 6px;
    border-radius: 0 80px 80px 0;
    border-color: rgba(46, 49, 146, 0.28);
}

/* RIGHT Item Configuration */
.timeline-item.right .timeline-marker {
    right: 32%; /* center over the card (12% margin + half of 40% width = 32%) */
}

.timeline-item.right .timeline-content {
    margin-left: auto; /* Push to right */
    margin-right: 12%; /* Push content to the left of the marker */
    text-align: left;
}

/* Connector for Right Item: Goes from 95% (Right) to 5% (Left) */
.timeline-item.right::before {
    top: 14px; /* start at marker center */
    right: calc(32% + 14px); /* start at visual center of marker (32% + half marker width) */
    width: 36%; /* shorter span between centered markers */
    height: 100%;
    border-top-width: 6px;
    border-left-width: 6px;
    border-radius: 80px 0 0 80px;
    border-color: rgba(46, 49, 146, 0.28);
}

/* Remove connector line for the last item */
.timeline-container .timeline-item:last-of-type::before {
    display: none !important;
}

/* Bubble Tails removed: markers now align to top center of cards without triangle tails */

/* Footer area */
.timeline-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    position: relative;
    z-index: 2;
}

.timeline-item:last-child::before {
    display: none;
}

/* Vertical drop from last marker to footer */
.timeline-item:last-child::after {
    content: '';
    position: absolute;
    top: 14px; /* Center of 28px marker */
    width: 10px;
    height: 80px;
    background: var(--primary-color);
    opacity: 0.4;
    z-index: 1;
}
.timeline-item.left:last-child::after { left: calc(32% + 9px); /* adjust to centered marker */ }
.timeline-item.right:last-child::after { right: calc(32% + 9px); }


.timeline-footer .bio-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--white);
    box-shadow: var(--shadow-lg);
}

.timeline-footer .bio-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive Design */
@media (max-width: 968px) {
    /* Tablet: Reduce width but keep snake */
    .timeline-container {
        width: 100%;
        margin-left: 0;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .timeline-content {
        width: 45%;
    }
    
    .timeline-item.left .timeline-marker { left: 2%; }
    .timeline-item.left::before { left: 2%; width: 96%; }
    .timeline-item.left .timeline-content { margin-left: 10%; }
    
    .timeline-item.right .timeline-marker { right: 2%; }
    .timeline-item.right::before { right: 2%; width: 96%; }
    .timeline-item.right .timeline-content { margin-right: 10%; }
}

@media (max-width: 768px) {
    /* Mobile: Linear Layout */
    .timeline-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .timeline-item {
        padding-bottom: 2rem;
        padding-left: 0; /* remove left offset since markers/line are hidden */
        width: 100%;
    }

    .timeline-item::before {
        /* Hide the vertical connector line on mobile for a cleaner look */
        display: none;
    }
    
    .timeline-item:last-child::before {
        display: none;
    }
    
    .timeline-item:last-child::after {
        display: none;
    }

    /* Reset Markers */
    .timeline-item.left .timeline-marker,
    .timeline-item.right .timeline-marker {
        display: none; /* remove timeline markers on mobile */
    }

    /* (removed marker vertical drop earlier; nothing to hide here) */

    /* Reset Content */
    .timeline-item.left .timeline-content,
    .timeline-item.right .timeline-content {
        width: 100%;
        margin: 0; /* full-width cards on mobile */
        text-align: left;
    }

    /* Reset Bubbles */
    .timeline-item.left .timeline-content::after,
    .timeline-item.right .timeline-content::after {
        left: -10px;
        right: auto;
        border-width: 10px 10px 10px 0;
        border-color: transparent var(--white) transparent transparent;
    }
}

/* ===== Services Wheel Section ===== */
.services-wheel-section {
    background: white; /* override to pure white */
}

/* ===== Contact Section ===== */
.contact {
    padding: 6rem 0;
    background: linear-gradient(135deg, #2E3192 0%, #4c52c9 100%);
    color: white;
}

@media (max-width: 768px) {
    .contact {
        padding: 3rem 0;
    }

    .contact h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 0 1rem;
    }

    .contact-info h3 {
        font-size: 1.5rem;
    }

    .contact-info p {
        font-size: 1rem;
    }

    .info-items {
        gap: 0.6rem; /* reduced vertical space between contact items on small screens */
    }

    .info-item {
        padding: 0.5rem; /* tighter padding so items sit closer together */
    }

    .cards-container {
        width: 100%;
        height: auto;
        position: relative;
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px;
        padding: 0.875rem 1rem;
    }

    .submit-button {
        width: 100%;
        padding: 1rem;
        min-height: 48px;
    }
}

.contact p, 
.contact h3, 
.contact label {
    color: white !important;
}

/* ===== Footer Styling Override ===== */
.footer {
    background: #121428 !important;
    color: white !important;
}

.footer a {
    color: #e2e2e2 !important;
}

.footer h4 {
    color: white !important;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* Make smaller headings inside the about section use the primary (blue) color */
.about-text h4 {
    color: var(--primary-color);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.linkedin-link {
    margin-top: 2rem;
}

.linkedin-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    transition: var(--transition);
}

.linkedin-link a:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
}

/* ===== Services Wheel Section ===== */
.services-wheel-section {
    min-height: 80vh; /* slightly reduced so it sits closer to previous section */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem 2rem; /* reduced top padding */
    position: relative;
    overflow: hidden;
}

.services-intro {
    text-align: center;
    margin-bottom: 2rem;
}

.services-intro p {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0;
}

.services-blue {
    color: var(--primary-color);
}

.services-orange {
    color: var(--secondary-color);
}

.wheel-and-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

/* Wheel Container */
.wheel-container {
    position: relative;
    width: calc(var(--wheel-size) * var(--wheel-scale));
    height: calc(var(--wheel-size) * var(--wheel-scale));
    flex-shrink: 0;
}

.smv-wheel {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
    opacity: 0; /* hidden until SVG images load to avoid brief colored segments */
    /* make element visible to the layout to reduce perceived delay; keep hidden via opacity */
    visibility: visible;
    pointer-events: none; /* avoid interaction while not ready */
    transition: opacity 120ms linear; /* faster reveal */
}
.smv-wheel.ready {
    opacity: 1;
    pointer-events: auto;
}

.wheel-segment {
    cursor: pointer;
    transition: all 0.3s ease;
    filter: url(#shadow);
    stroke: transparent;
    stroke-width: 0;
}

/* Removed scaling on the colored segment to prevent color pop out */
.wheel-segment:hover {
    /* transform: scale(1.03); */
    transition: 0.25s ease;
    opacity: 1 !important;
}

/* Removed all scaling on hover including images and text to prevent movement */
.wheel-segment-group:hover image {
    transform: none !important;
    transition: none !important;
}

/* Remove scaling and translate on wheel text on hover */
.wheel-segment-group:hover .wheel-text {
    transform: translateY(-2px);
    transition: none !important;
}

.wheel-segment-group:hover .wheel-text {
    transform: translateY(-2px);
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9),
                 -2px -2px 4px rgba(0, 0, 0, 0.7),
                 0 0 12px rgba(0, 0, 0, 0.6);
}

.wheel-segment.active:not(.wheel-center) {
    stroke: var(--secondary-color);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: url(#shadow) brightness(1.05);
}

/* Blur images of non-selected wheel segments */
.wheel-segment-group image {
    transition: filter 0.35s ease;
}

.wheel-segment-group:not(.active) image {
    filter: blur(1.5px) brightness(0.9);
}

/* Ensure the center segment (Bæredygtighed) never receives a stroke outline */
.wheel-segment.wheel-center {
    stroke: none !important;
    stroke-width: 0 !important;
}

/* When center segment is active, show the same border as other segments */
.wheel-center-stroke {
    stroke: transparent;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: url(#shadow) brightness(1.05);
    pointer-events: none;
}

/* Show the inner stroke when the center group is active */
.wheel-segment-group.active .wheel-center-stroke {
    stroke: var(--secondary-color);
}

/* Read more link inside service cards */
.service-card-wheel .read-more {
    display: inline-block;
    margin-top: 1.25rem;
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.service-card-wheel .read-more:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
}

/* ===== Clean Service Cards Animations ===== */
@keyframes cardEnterForward {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cardExitBackward {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-40px);
    }
}

@keyframes cardEnterBackward {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cardExitForward {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* Services cards improvements */
.service-card-wheel {
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 2rem;
    background: var(--white);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    display: flex;
    flex-direction: column;
    /* GSAP will handle these; CSS transitions disabled to avoid conflicts */
}

.service-card-wheel.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.wheel-center {
    pointer-events: all;
}

.wheel-text {
    pointer-events: none;
    user-select: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                 -1px -1px 2px rgba(0, 0, 0, 0.6),
                 0 0 8px rgba(0, 0, 0, 0.5);
    font-weight: 700;
    transition: all 0.3s ease;
}


/* Cards Container */
.cards-container {
    position: relative;
    width: calc(var(--card-width) * var(--card-scale));
    height: calc(var(--card-height) * var(--card-scale));
    max-width: 100%;
    flex-shrink: 0;
}

.service-card-wheel .service-icon {
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

/* Visual polish: subtle layered stack look (angles and offsets) */
.service-card-wheel.pos-back-1 { transform-origin: left center; }
.service-card-wheel.pos-back-2 { transform-origin: left center; }
.service-card-wheel.pos-back-1::before,
.service-card-wheel.pos-back-2::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* Shuffle animations are handled via GSAP in JavaScript for consistent,
   non-conflicting transforms. Remove CSS-based .is-shuffling rules so
   GSAP controls all motion. Hidden cards remain non-interactive via
   the `.pos-hidden` rules above. */

/* Stacked cards layout for wheel services
   - The active card sits in front (pos-front).
   - Two previous cards (pos-back-1 and pos-back-2) are visible to the right,
     slightly shifted and scaled to create a stacked / depth effect.
   - Other cards are hidden off to the right.
*/
.service-card-wheel { /* ensure default baseline for GSAP overrides */
    transform-origin: left center;
}

.service-card-wheel.pos-front {
    visibility: visible;
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 30;
    box-shadow: 0 22px 40px rgba(0,0,0,0.25);
    pointer-events: auto;
}

.service-card-wheel.pos-back-1 {
    visibility: visible;
    opacity: 1;
    transform: translateX(18px) scale(0.995);
    z-index: 20;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    filter: blur(0.5px);
    pointer-events: none;
}

.service-card-wheel.pos-back-2 {
    visibility: visible;
    opacity: 1;
    transform: translateX(36px) scale(0.99);
    z-index: 10;
    box-shadow: 0 26px 60px rgba(0,0,0,0.22);
    filter: blur(0.8px);
    pointer-events: none;
}

.service-card-wheel.pos-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateX(140px) scale(0.94);
    z-index: 5;
    pointer-events: none;
}

/* Smooth default for browsers without GSAP; GSAP will handle animations
   but CSS provides sensible fallback transitions */
.service-card-wheel {
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1),
                box-shadow 0.35s ease, visibility 0.01s linear 0.45s;
}

.service-card-wheel h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.service-card-wheel p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-light);
    flex: 1;
    margin-bottom: 0;
}

/* Card Navigation Arrows */
.card-navigation {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.nav-arrow {
    background: transparent;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary-color);
    transition: var(--transition-smooth);
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.nav-arrow:hover:not(:disabled) {
    background: var(--primary-color);
    color: white;
    transform: scale(1.12);
    box-shadow: var(--shadow);
}

.nav-arrow:active:not(:disabled) {
    transform: scale(1.05);
}

.nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #ccc;
    color: #ccc;
}

.nav-arrow:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Redesigned service cards (Carousel-inspired) */
.service-card-wheel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease, visibility 0.01s linear 0.35s;
}

.service-card-wheel.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.service-card-wheel .service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--logo-pastel-primary);
    color: var(--primary-color);
    margin-bottom: 16px;
    flex-shrink: 0;
}

.service-card-wheel h3 {
    margin-bottom: 6px;
    color: var(--primary-color);
    font-weight: 900;
    font-size: 1.15rem;
}

.service-card-wheel p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-dark);
    flex: 1 1 auto;
    margin-bottom: 0;
}

.cards-container {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    max-width: 100%;
    flex-shrink: 0;
}

.card-navigation {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f1f1;
    flex-shrink: 0;
}

.nav-arrow {
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary-color);
    transition: transform 140ms ease, background 140ms ease, color 140ms ease;
    padding: 0;
}

.nav-arrow:hover:not(:disabled) {
    background: var(--primary-color);
    color: var(--white);
    transform: scale(1.06);
}

.nav-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #e0e0e0;
    color: #bdbdbd;
}

.service-card-wheel .read-more {
    display: inline-block;
    margin-top: 1rem;
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease, color 160ms ease;
}

.service-card-wheel .read-more:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
}

/* keep existing GSAP positional helpers intact (pos-front, pos-back-1, etc.) */

/* End redesigned service cards */

/* Service Icon */
.service-icon {
    display: inline-block;
}

/* ===== Service Cards: enforce consistent sizing =====
   There are duplicated/overlapping rules for .cards-container earlier
   in the stylesheet. Force the container to use the scaled card height
   and make each .service-card-wheel fill that height so all cards
   present at the same size (prevents one card appearing correct while
   others collapse/overflow due to cascade differences). */
.cards-container {
    /* Slightly taller than the original card height so all cards
       match the Bæredygtighed card plus a small nudge for breathing room. */
    height: calc(var(--card-height) + 36px) !important;
    width: var(--card-width) !important;
    box-sizing: border-box;
}

.service-card-wheel {
    height: 100% !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-card-wheel p {
    flex: 1 1 auto;
    overflow: auto;
}


/* ===== Contact Section ===== */
.contact {
    padding: 6rem 0;
    background: var(--white);
    /* Ensure text is readable on white background */
    color: var(--text-dark);
}

/* Force readable text color for contact sub-elements in case an earlier
   dark-theme rule remains in the stylesheet (overrides with !important). */
.contact p,
.contact h3,
.contact label,
.contact .info-item p,
.contact .info-item a {
    color: var(--text-dark) !important;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1100px;
    margin: 0 auto;
    /* Prevent the form column from stretching to the taller info column */
    align-items: start;
}

@media (max-width: 968px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.contact-info h3 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.contact-info p {
    font-size: 1.05rem;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.info-items {
    display: flex;
    flex-direction: column;
    gap: 0.6rem; /* bring items closer vertically */
}

.info-item {
    display: flex;
    gap: 0.6rem; /* reduce horizontal gap between icon and text */
    align-items: flex-start;
    padding: 0.5rem; /* smaller padding for tighter grouping */
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: var(--transition);
}

.info-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(4px);
}

.info-item svg {
    color: var(--secondary-color);
    flex-shrink: 0;
    margin-top: 0.2rem;
    width: 24px;
    height: 24px;
}

.info-item strong {
    display: block;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.info-item p {
    margin: 0;
    color: var(--text-light);
}

.info-item a {
    color: var(--text-light);
}

.info-item a:hover {
    color: var(--primary-color);
}

/* ===== Contact Form ===== */
.contact-form-wrapper {
    /* Make the wrapper neutral so only one visible card remains.
       Keep flex container behavior for sizing, but remove visual layers. */
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    min-height: 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* reduced gap between input groups */
    height: auto; /* don't force full height — let content determine size */
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-button {
    background: var(--secondary-color);
    color: var(--white);
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
    margin-top: 0.5rem; /* tighter spacing above the submit */
}

.submit-button:hover:not(:disabled) {
    background: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.submit-button:active:not(:disabled) {
    transform: translateY(-1px);
}

.submit-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-message {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    display: none;
    margin-top: 1rem;
    animation: slideDown 0.3s ease-out;
}

.form-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

/* ===== Envelope animation styles (contact form) ===== */
.envelope-wrapper {
    perspective: 1200px;
    display: flex;
    flex: 1 1 auto;
}

.envelope {
    position: relative;
    width: 100%;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    transform-style: preserve-3d;
    transform-origin: center center;
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: auto; /* allow envelope to size to its content */
}

.envelope__flap {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 54px;
    background: transparent;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transform-origin: top center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    z-index: 40;
    pointer-events: none;
}

/* hide the flap visually until the fold animation runs */
.envelope__flap {
    opacity: 0;
}

.envelope__flap::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 0;
    height: 0;
    border-left: 42px solid transparent;
    border-right: 42px solid transparent;
    border-bottom: 54px solid #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    z-index: 40; /* keep triangle under the tag */
    opacity: 0; /* also hide triangle until revealed by JS */
}

.envelope__content {
    position: relative;
    /* add a subtle gap below the submit button */
    padding: 0.75rem 0.9rem 0.35rem;
    border-radius: 12px;
    background: transparent;
    transform-style: preserve-3d;
    z-index: 20;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* allow the content to stretch and make panes fill vertically */
}

/* subtle inner shadow to read like paper */
.envelope::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    box-shadow: inset 0 6px 18px rgba(0,0,0,0.03);
    pointer-events: none;
    z-index: 10;
}

/* while flying we apply a class to help CSS fallback */
.envelope.is-flying {
    transition: transform 0.9s cubic-bezier(.2,.8,.2,1), opacity 0.9s ease;
}

@media (prefers-reduced-motion: reduce) {
    .envelope, .envelope__flap { transition: none !important; }
}

/* small responsive adjustments so envelope fits nicely on narrow viewports */
@media (max-width: 768px) {
    .envelope__flap { height: 48px; }
    /* keep mobile comfortable with a small bottom gap */
    .envelope__content { padding: 0.75rem 0.9rem 0.35rem; }
}

/* outer shell (envelope exterior shown after folding) */
.envelope__shell {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7f7f7 0%, #e9e9e9 100%);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    z-index: 15;
    pointer-events: none;
    opacity: 0; /* reveal after fold via JS/GSAP */
    transform-origin: top center;
    transform-style: preserve-3d;
    overflow: hidden;
}

/* a small decorative stamp or corner visible on the shell */
.envelope__shell::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 10px;
    width: 62px;
    height: 36px;
    background: linear-gradient(135deg, rgba(255,107,74,0.12), rgba(46,49,146,0.06));
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
    opacity: 0.9;
}

/* seam, texture and folded clipping to make the shell read like a real envelope */
.envelope__shell {
    background-image: linear-gradient(180deg, #f7f7f7 0%, #e9e9e9 100%),
                      repeating-linear-gradient(0deg, rgba(0,0,0,0.008) 0px, rgba(0,0,0,0.008) 1px, transparent 1px, transparent 6px);
    background-blend-mode: normal, overlay;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12), inset 0 2px 0 rgba(255,255,255,0.6);
    transition: opacity 220ms ease, clip-path 260ms ease, transform 260ms ease;
    will-change: opacity, clip-path, transform;
}

/* seam line and small center triangle at the bottom of the visible shell */
.envelope__shell::before {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 2px;
    height: 2px;
    background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.95;

/* ===== Scroll-triggered animation utilities ===== */
/* Base hidden state for animated elements */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(18px) scale(0.995);
    will-change: opacity, transform;
}

/* Visible state applied by JS when element enters viewport */
.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 520ms cubic-bezier(.2,.9,.25,1), transform 520ms cubic-bezier(.2,.9,.25,1);
}

/* Optional alternate: slide in from right (used for the envelope/form) */
.animate-slide-right {
    opacity: 0;
    transform: translateX(24px) translateZ(0) scale(0.995);
}
.animate-slide-right.in-view {
    opacity: 1;
    transform: translateX(0) translateZ(0) scale(1);
    transition: opacity 560ms cubic-bezier(.2,.9,.25,1), transform 560ms cubic-bezier(.2,.9,.25,1);
}

/* Small utility for subtle staggered scale on icons */
.animate-pop {
    opacity: 0;
    transform: scale(0.92);
}
.animate-pop.in-view {
    opacity: 1;
    transform: scale(1);
    transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.9,.25,1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll, .animate-slide-right, .animate-pop { transition: none !important; transform: none !important; opacity: 1 !important; }
}
}

/* small triangular shadow at the center seam to hint at the flap intersection */
.envelope__shell .center-seam-triangle {
    display: none; /* optional DOM element if you prefer to add in HTML */
}

/* When folded reveal the top half (JS positions for extra polish) */
.envelope.is-folded .envelope__shell { opacity: 1; clip-path: inset(0 0 50% 0); }

/* flap surface polish when visible */
.envelope__flap {
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.95));
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* ensure flap sits above shell when folded */
.envelope.is-folded .envelope__flap { z-index: 45; }

/* stronger folded shadow */
.envelope.is-folded { box-shadow: 0 22px 48px rgba(0,0,0,0.14); }

/* tag looks slightly inset on the paper */
.envelope__tag { background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.04); }

/* When the envelope shell is active (folded state), show only the top half in viewport
   - we rely on JS to position the shell so the appearance is that half the envelope is visible */
.envelope.is-folded .envelope__shell { opacity: 1; }

/* ensure flap appears above the shell */
.envelope__flap { z-index: 40; }

/* envelope panes (top / bottom) used for center crease folding */
.envelope__pane {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0;
}

.envelope__pane--top {
    transform-origin: bottom center;
}

.envelope__pane--bottom {
    transform-origin: top center;
    /* push the submit button toward the bottom of the pane */
    justify-content: flex-end;
    /* remove extra bottom padding so submit is closer to the envelope edge */
    padding-bottom: 0;
}

/* increase space under the submit button so it sits further from the envelope edge */
.envelope__pane--bottom .submit-button {
    margin-bottom: 1.5rem; /* adjust as needed: 1rem = 16px, 1.25rem = 20px */
}

/* tag showing name label and value (always visible on shell when folded) */
.envelope__tag {
    position: absolute;
    left: 18px; /* slight nudge to avoid center flap */
    top: 18px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 9999; /* raised above flap so it is always visible when shown */
    color: #333;
    background: rgba(255,255,255,0.95);
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    pointer-events: none;
    opacity: 0; /* hidden until envelope is folded/sent */
    transform: translateY(-6px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.envelope__tag-label {
    font-size: 0.85rem;
    color: #666; /* revert to original muted label color */
    font-weight: 600;
}

.envelope__tag-name {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 600;
}

/* make sure label still shows on small screens */
@media (max-width: 480px) {
    .envelope__tag { left: 10px; top: 8px; padding: 5px 8px; }
    .envelope__tag-name { font-size: 0.9rem; }
}

/* ===== Footer ===== */
.footer {
    background: var(--primary-color);
    color: var(--white);
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: start; /* prevent grid children from stretching vertically */
}

.footer-map {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* avoid stretching children horizontally */
    align-self: start; /* prevent the map column from stretching vertically in the grid */
}

.footer-map h4 {
    color: var(--white);
    margin-bottom: 1rem;
}

.footer-map iframe {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    max-width: 360px; /* cap the map so it can't force the footer very tall */
    max-height: 360px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.footer-logo img {
    height: 80px;
    margin-bottom: 1rem;
}

.footer-logo p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

/* Footer navigation placed under the logo/slogan */
.footer-nav {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.9);
    background: none;
    padding: 0;
    border-radius: 0;
    font-weight: 400;
    transition: color 0.15s ease;
    display: block;
    text-decoration: none;
    padding: 0.15rem 0;
}

.footer-nav a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
    transform: none;
}

/* Title above footer navigation */
.footer-nav-title {
    color: rgba(255,255,255,0.95);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    padding-bottom: 0;
    width: 100%;
}

/* Thin separator line placed between the title and the nav links */
.footer-nav-separator {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0.4rem 0 0.6rem 0;
}


.lang-switch-footer:hover {
    background: var(--secondary-color);
    color: var(--white);
}

.footer-links h4 {
    color: var(--white);
    margin-bottom: 1rem;
}

.footer-links p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
}

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

.footer-bottom {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* ===== Responsive Design ===== */
@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 968px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .hero-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-map iframe {
        height: 300px;
    }

    .hero {
        padding: 4rem 0;
    }

    .hero-image {
        order: -1;
    }


    .nav-links {
        gap: 1rem;
    }

    /* Wheel Section Mobile */
    .services-wheel-section {
        flex-direction: column;
        padding: 3rem 1rem;
        min-height: auto;
    }

    .wheel-container {
        width: min(calc(var(--wheel-size) * var(--wheel-scale)), 420px);
        height: min(calc(var(--wheel-size) * var(--wheel-scale)), 420px);
        margin-right: 0;
        margin-bottom: 2rem;
    }

    .cards-container {
        width: 100%;
        max-width: min(calc(var(--card-width) * var(--card-scale)), 650px);
        height: auto;
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0.75rem 0;
    }

    .nav-content {
        flex-direction: row;
        gap: 1rem;
    }



    .about,
    .contact {
        padding: 4rem 0;
    }

    .contact-form-wrapper {
        padding: 1.5rem;
    }

    /* Mobile: Hide wheel, show all cards as normal list */
    .services-wheel-section {
        flex-direction: column;
        min-height: auto;
        padding: 4rem 1rem;
    }
    
    .wheel-container {
        display: none;
    }
    
    .cards-container {
        width: 100%;
        max-width: 600px;
        height: auto;
        position: static;
    }
    
    .service-card-wheel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-bottom: 2rem;
        padding: 2rem;
    }
    
    /* Hide navigation arrows on mobile */
    .card-navigation {
        display: none;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .cta-button {
        padding: 1rem 2rem;
        font-size: 1rem;
        width: 100%;
        max-width: 280px;
    }

    .logo {
        height: 45px;
    }

    .about-timeline-section {
        padding: 2rem 0;
    }

    .services-intro p {
        font-size: 1.5rem;
        padding: 0 0.5rem;
    }

    .article-content h3 {
        font-size: 1.3rem;
    }

    .article-content p {
        font-size: 0.9rem;
    }

    .article-row .article-content {
        padding: 1.25rem;
    }

    .timeline-content {
        padding: 1.25rem;
    }

    .timeline-content h4 {
        font-size: 1.2rem;
    }

    .timeline-content p {
        font-size: 0.9rem;
    }

    .nav-links {
        width: 260px;
        padding: 5rem 1.5rem 2rem;
    }

    .footer-content {
        padding: 0 0.5rem;
    }

    .footer-section h4 {
        font-size: 1.1rem;
    }
}

/* ===== Animations ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Site Framing Lines (left + right) ===== */
/* (framing lines removed) */


.hero-content,
.about-content,
.service-card {
    animation: fadeInUp 0.6s ease-out;
}

/* ===== Blog Section Styling ===== */
.blog-segment {
    /* Remove vertical padding to allow full height */
    padding: 0;
    background: var(--bg-light);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

    /* Set min-height for vertical fill */
    min-height: 700px;

    /* Remove max-width constraint from container */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    display: flex;
    flex-direction: row;
    justify-content: stretch;
}

.blog-segment.visible {
    opacity: 1;
    transform: translateY(0);
}

.blog-segment:ntnth-child(odd) {
    flex-direction: row;
}

.blog-segment:ntnth-child(even) {
    flex-direction: row-reverse;
}

.blog-segment .container {
    /* Remove max-width and padding to allow full-width content */
    max-width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-grow: 1;
    align-items: stretch;
}

.blog-segment h2 {
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--primary-color);
    font-weight: 700;
    width: 100%;
    margin-top: 1rem;
    align-self: flex-start;
}

.blog-content-wrapper {
    display: flex;
    align-items: stretch;
    gap: 2rem;
    flex-grow: 1;
    width: 100%;
}

.blog-segment .blog-image {
    flex: 1 1 45% !important;
    max-width: 45% !important;
    height: 100%;
    overflow: hidden;
    box-shadow: var(--shadow);
    border-radius: 15px 0 0 15px;
    margin-right: 2rem;
}

.blog-segment.even .blog-image {
    border-radius: 0 15px 15px 0;
    margin-right: 0;
    margin-left: 2rem;
}

.blog-segment .blog-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-segment .blog-content {
    flex: 1 1 55% !important;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .blog-segment {
        padding: 3rem 0;
        min-height: auto;
        width: auto;
        margin-left: 0;
        margin-right: 0;
        display: block;
    }

    .blog-content-wrapper {
        flex-direction: column !important;
    }

    .blog-segment .blog-image,
    .blog-segment .blog-content {
        max-width: 100%;
        flex: auto;
        padding: 0;
        height: auto;
        border-radius: 15px;
    }

    .blog-segment .blog-content {
        margin-top: 1rem;
        padding: 0;
    }
}

/* ===== Enhanced Form Styling ===== */
.contact-form {
    max-width: 100%;
}

.form-group {
    margin-bottom: 0.2rem; /* tighter spacing between fields */
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--white);
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #2E6BFF; /* very small blue border for subtle contrast */
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    background: #ffffff; /* solid white for clear contrast against dark contact background */
    color: var(--text-dark);
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #2E6BFF;
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(46,102,255,0.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
}

.submit-button {
    padding: 1rem 2rem;
    background: var(--secondary-color);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.submit-button:hover:not(:disabled) {
    background: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.submit-button:active:not(:disabled) {
    transform: translateY(0);
}

/* ===== Enhanced Link Styles ===== */
a:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* ===== Form Message Styling ===== */
.form-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    animation: slideDown 0.3s ease-out;
}

.form-message.success {
    background: #4CAF50;
    color: white;
}

.form-message.error {
    background: #f44336;
    color: white;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Laptop-specific card scaling: make cards larger on typical laptop viewports */
@media (min-width: 992px) and (max-width: 1400px) {
    :root {
        --card-scale: 1.8; /* boost card scale further on laptops */
    }

    /* Allow larger max-width for cards on laptops while keeping responsive cap */
    .cards-container {
        max-width: min(calc(var(--card-width) * var(--card-scale)), 900px);
    }
}

/* ===== Button Accessibility ===== */
button:focus-visible,
.cta-button:focus-visible,
.submit-button:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* ===== Skip to main content link ===== */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 100;
}

.skip-to-main:focus {
    top: 0;
}



/* ===== Decorative Swirls ===== */
#decorative-swirls {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Above section backgrounds (level 0), below content (level 2) */
    pointer-events: none;
}

/* Ensure content sits above the swirls */
section {
    position: relative;
    z-index: auto; /* Keeps background at level 0 */
}

section > .container,
section > .content,
.hero-content,
.footer-content {
    position: relative;
    z-index: 2; /* Lifts content above swirls */
}

/* Ensure images in articles are above swirls */
.article-image {
    z-index: 2 !important; /* Was 1, needs to be > 1 to beat canvas */
}


/* Ensure modal is above everything */
.circle-modal {
    z-index: 2000 !important;
}

/* Hide the small '×' close button that appears at the very bottom
   (keeps markup intact but removes visible control) */
.circle-modal__close {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


:root {
    --pastel-green: #F0FDF4;
    --pastel-purple: #F5F3FF;
}

/* ===== Board Experience Section ===== */
.board-experience-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
}

.board-experience-section h2 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.board-intro {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto 4rem;
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.board-card {
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    min-height: 340px;
    max-height: 340px;
    height: 340px;
    width: 100%;
    overflow: hidden;
    border-color: var(--primary-color);
}

.board-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--secondary-color);
}

.board-card-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.board-logo {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-logo svg {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    width: 45px;
    height: 45px;
}

.board-logo img {
    display: block;
    width: 45px;
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.board-header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.board-header-text h4 {
    font-size: 0.9rem;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.board-header-text h5 {
    font-size: 0.85rem;
    color: var(--text-dark);
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
}

.board-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.board-duration {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.board-category {
    font-size: 0.75rem;
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 107, 74, 0.1);
    border-radius: 6px;
    display: inline-block;
    align-self: flex-start;
}

.board-description {
    font-size: 0.75rem;
    color: var(--text-medium);
    line-height: 1.4;
    margin: 0;
    overflow-y: auto;
    flex: 1;
}

/* Responsive Design for Board Grid */
@media (max-width: 1200px) {
    .board-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 992px) {
    .board-experience-section {
        padding: 4rem 0;
    }

    .board-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .board-card {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .board-experience-section {
        padding: 3rem 0;
    }

    .board-intro {
        font-size: 1rem;
        margin-bottom: 2.5rem;
    }

    .board-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .board-card {
        padding: 1.25rem;
    }

    .board-logo {
        width: 45px;
        height: 45px;
    }

    .board-logo svg,
    .board-logo img {
        width: 45px;
        height: 45px;
    }

    .board-content h4 {
        font-size: 1rem;
    }

    .board-content h5 {
        font-size: 0.9rem;
    }

    .board-duration,
    .board-description {
        font-size: 0.8rem;
    }

    .board-category {
        font-size: 0.8rem;
        padding: 0.2rem 0.6rem;
    }
}

@media (max-width: 480px) {
    .board-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .board-card {
        padding: 1.5rem;
    }
}

/* ===== Cookie Banner & Policy Styles ===== */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 1500;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.cookie-inner {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.98));
    border: 1px solid rgba(20,20,40,0.06);
    box-shadow: var(--shadow-lg);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1100px;
    width: 100%;
    pointer-events: auto;
}
.cookie-text { flex: 1 1 60%; }
.cookie-text p { margin: 6px 0 0; color: var(--text-medium); font-size: 0.95rem; }
.cookie-actions { display:flex; gap:10px; align-items:center; }
.btn { display:inline-block; padding:10px 14px; border-radius:8px; font-weight:600; cursor:pointer; border:1px solid transparent; }
.btn-primary { background: var(--primary-color); color: #fff; border-color: rgba(0,0,0,0.04); }
.btn-outline { background: transparent; border: 1px solid rgba(34,34,34,0.08); color: var(--text-dark); }

.cookie-policy-page { padding: 3rem 0 6rem; }
.policy-content { max-width:900px; margin: 2rem auto; background: var(--white); padding: 2rem; border-radius: 12px; box-shadow: var(--shadow); }
.cookie-preferences { display:flex; flex-direction:column; gap:12px; margin-top:1rem; }
.pref-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #f1f1f1; }
.pref-control { display:flex; align-items:center; }

/* simple toggle switch */
.switch { position: relative; display: inline-block; width:52px; height:30px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; transition: .3s; border-radius: 999px; }
.slider:before { position:absolute; content:""; height:22px; width:22px; left:4px; bottom:4px; background:white; transition:.3s; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.switch input:checked + .slider { background: var(--primary-color); }
.switch input:checked + .slider:before { transform: translateX(22px); }

.policy-actions { margin-top:1.25rem; display:flex; gap:10px; }

@media (max-width: 720px) {
    .cookie-inner { flex-direction: column; align-items:flex-start; padding:12px; gap:12px; }
    .cookie-actions { width:100%; justify-content:flex-end; }
    .cookie-banner { bottom: 12px; padding: 0 12px; }
}

/* Board experience: show only first 5 cards on mobile and provide a "show more" toggle */
@media (max-width: 768px) {
    .board-grid .board-card:nth-child(n+6) {
        display: none;
    }

    .board-grid.expanded .board-card {
        display: block; /* reveal all when expanded */
    }

    .board-show-more {
        display: block;
        margin: 1.25rem auto 0;
        text-align: center;
        background: transparent;
        border: none;
        color: var(--primary-color);
        font-weight: 700;
        cursor: pointer;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(46,49,146,0.08);
        transition: background 160ms ease, transform 120ms ease;
    }

    .board-show-more:active { transform: translateY(1px); }
}

/* Hide the control on larger screens */
@media (min-width: 769px) {
    .board-show-more { display: none; }
}

/* Banner visual identity: subtle cookie icon and entrance animation */
.cookie-inner::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='%23F4C150'/><circle cx='8.5' cy='9' r='1.2' fill='%23423B3B'/><circle cx='13.5' cy='8' r='1.2' fill='%23423B3B'/><circle cx='15.5' cy='13' r='1.2' fill='%23423B3B'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.cookie-banner { animation: cookie-banner-in 500ms cubic-bezier(.2,.9,.2,1); }
@keyframes cookie-banner-in {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Modal styles */
.cookie-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1600; }
.cookie-modal[hidden] { display: none; }
.cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(22,22,30,0.5); backdrop-filter: blur(4px); }
.cookie-modal__panel { position: relative; width: min(920px, 94%); background: var(--white); border-radius: 12px; box-shadow: var(--shadow-xl); overflow: hidden; z-index: 2; transform-origin: center; animation: modal-pop .18s cubic-bezier(.2,.9,.2,1); }
.cookie-modal__header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #f1f1f1; }
.cookie-modal__body { padding:18px 20px; color:var(--text-medium); }
.cookie-modal__footer { padding:14px 20px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid #f7f7f7; }
.cookie-modal__close { background:transparent; border:0; font-size:20px; cursor:pointer; padding:6px 10px; }
@keyframes modal-pop { from { transform: scale(.98) translateY(6px); opacity:0 } to { transform: scale(1) translateY(0); opacity:1 } }

/* Prevent flashy placeholder colors behind images during reloads */
img,
picture,
figure,
.article-image,
.blog-image,
.article-row .article-image,
.hero-image-foreground,
.hero-image-background,
.lazyload,
.lazyloading,
.lazyloaded,
.wheel-segment-group image,
.wheel-segment image {
    background: transparent !important;
    background-color: transparent !important;
}

/* Extra: ensure lazyload placeholders don't reveal colored backgrounds */
.lazyload,
.lazyloading {
    background: transparent !important;
}

/* tweak button styles inside modal */
.cookie-modal .btn { padding:8px 12px; border-radius:8px; }

@media (max-width:520px) {
    .cookie-modal__panel { width: 96%; }
    .cookie-modal__header h3 { font-size:1.1rem; }
}