/*
 Theme Name:   CR8 Theme
 Theme URI:    https://cr8.no
 Description:  Et spesiallaget tema for cr8.no.
 Author:       CR8
 Author URI:   https://cr8.no
 Template:     cr8-base-theme
 Version:      2.1.11
*/

:root {
    --text-dark: #0a2540;
    --text-light: #425466;
    --background-white: #ffffff;
    --background-dark-base: #050819;
    --new-white: #fff;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--background-dark-base);
    color: var(--text-light);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* FIKS: Fjernet unødvendig padding-top som skapte hvitt rom */
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

main#content {
    padding-top: 0;
}

/* ==========================================================================
   MODERNE "PILL" HEADER (KORRIGERT FOR JUSTERING)
   ========================================================================== */

.site-header-modern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    /* FIKS: Endret padding til å kun være vertikal. Horisontal padding styres av containeren. */
    padding: 24px 0;
    transition: padding 0.4s ease;
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInDown 0.8s 0.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.header-pill-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    /* FIKS: Lagt til horisontal padding her for å kontrollere avstand fra sidene */
    padding: 0 24px;
    border-radius: 50px;
    background-color: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid transparent;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- SCROLLED STATE --- */
.site-header-modern.is-scrolled {
    padding: 16px 0;
}
.site-header-modern.is-scrolled .header-pill-container {
    max-width: 1200px;
    /* FIKS: Justert padding for "pill"-formen */
    padding: 12px 12px 12px 24px;
    background-color: rgba(15, 20, 30, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* --- Innhold i header --- */
.site-header-modern .site-logo {
    height: 30px;
    width: auto;
    display: block;
}

.site-navigation-modern ul {
    margin: 0; padding: 0; list-style: none; display: flex; gap: 32px;
}

.site-navigation-modern a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.site-navigation-modern a:hover {
    opacity: 1;
}

.btn-header-cta {
    display: inline-block;
    background: #fff;
    color: #050819;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}
.btn-header-cta:hover {
    transform: translateY(-2px);
    background: #e0e0e0;
}

/* --- MOBILMENY-IKON --- */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px; height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}
.mobile-menu-toggle .line {
    width: 30px; height: 3px;
    background-color: #fff;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
}
.mobile-menu-toggle.is-active .line:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
.mobile-menu-toggle.is-active .line:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-active .line:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

/* --- Fullskjerm mobilmeny --- */
.mobile-menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #050819; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}
.mobile-menu-overlay.is-active { opacity: 1; visibility: visible; }
.mobile-navigation ul { list-style: none; padding: 0; margin: 0 0 40px 0; text-align: center; }
.mobile-navigation li {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-menu-overlay.is-active li:nth-child(1) { transition-delay: 0.2s; }
.mobile-menu-overlay.is-active li:nth-child(2) { transition-delay: 0.3s; }
.mobile-menu-overlay.is-active li:nth-child(3) { transition-delay: 0.4s; }
.mobile-menu-overlay.is-active li { opacity: 1; transform: translateY(0); }
.mobile-navigation a {
    color: #fff; text-decoration: none; font-size: 2.5rem;
    font-weight: 600; display: block; padding: 10px;
}
.mobile-navigation .mobile-cta {
    font-size: 1.2rem; padding: 12px 24px; border-radius: 20px;
    background: #fff; color: #050819;
}


/* --- Responsivitet for header-elementer --- */
@media (max-width: 768px) {
    .desktop-nav {
        display: none !important;
    }
    .mobile-menu-toggle {
        display: flex !important;
    }
    .site-header-modern, .site-header-modern.is-scrolled {
        padding: 12px 0;
    }
    .header-pill-container, .site-header-modern.is-scrolled .header-pill-container {
        padding: 20px 25px;
    }
}

/* ... (resten av CSS-filen forblir den samme) ... */

/* ==========================================================================
   HYPERMODERNE FORSIDEMAL (cr8-frontpage.php)
   ========================================================================== */

.hm-page-wrapper {
    background-color: #050819; /* Mørk, moderne bakgrunn */
    color: #fff;
}

/* --- Hero Seksjon --- */
.hm-hero {
    position: relative;
    padding: 100px 0 100px;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* --- Bakgrunnseffekter --- */
.hm-hero-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
}

/* FIKS: Fjernet .hm-gradient-blob og @keyframes scale-rotate */

/* NY STIL: Statisk glød bak nettleser-modulen */
.hm-hero-glow {
    position: absolute;
    top: 35%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 900px; /* Bredden på gløden */
    height: 900px; /* Høyden på gløden */
    background: radial-gradient(circle, rgba(92, 70, 228, 0.25) 0%, rgba(92, 70, 228, 0) 65%);
    border-radius: 50%;
    filter: blur(100px); /* Juster for mykhet */
    opacity: 0;
    animation: fadeIn 2s 1s forwards; /* Beholder en myk inntoning */
}

.hm-grid-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0;
    animation: fadeIn 2s 1s forwards;
}

/* --- Innhold --- */
.hm-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}
.hm-hero-text-wrapper {
    max-width: 800px;
    margin: 0 auto 60px;
}

.hm-hero-title {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2.5px;
    font-family: 'Space grotesk';
    margin-bottom: 24px;
}

.hm-hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.7);
    max-width: 50ch;
    margin: 0 auto 32px;
}

/* Animasjons-hjelpeklasser */
.line-wrap { display: block; overflow: hidden; }
.line-reveal {
    display: block;
    transform: translateY(110%);
    animation: revealUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Stagger-animasjon for tekst */
.hm-hero-title .line-wrap:nth-child(1) .line-reveal { animation-delay: 0.2s; }
.hm-hero-title .line-wrap:nth-child(2) .line-reveal { animation-delay: 0.35s; }
.hm-hero-subtitle .line-wrap:nth-child(1) .line-reveal { animation-delay: 0.5s; }
.hm-hero-subtitle .line-wrap:nth-child(2) .line-reveal { animation-delay: 0.6s; }

.hm-hero-cta {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1s 0.8s forwards;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.hm-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
}
.hm-btn-primary {
    background: #fff;
    color: #050819;
}
.hm-btn-primary:hover {
    background: #ccc;
    transform: translateY(-2px);
}
.hm-btn-secondary {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}
.hm-btn-secondary:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

/* Keyframes */
@keyframes revealUp { to { transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

/* --- Visuell (Browser Mockup) --- */
.hm-hero-visual {
    perspective: 2000px;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeIn 1s 1.2s forwards;
}

#hm-browser-module {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    transform: rotateX(15deg) rotateY(0deg) scale(0.9);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(10px);
}
#hm-browser-module:hover {
    transform: rotateX(0deg) rotateY(0deg) scale(1);
}

.browser-bar {
    padding: 12px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.browser-dots {
    width: 55px; height: 12px;
    background-image: radial-gradient(circle at 6px, #ff5f56 6px, transparent 6px), radial-gradient(circle at 27px, #ffbd2e 6px, transparent 6px), radial-gradient(circle at 48px, #27c93f 6px, transparent 6px);
}
.browser-url {
    flex-grow: 1;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    padding: 6px 12px;
    margin: 0 20px;
    text-align: left;
}

.browser-content {
    flex-grow: 1;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
}
.slides-track {
    display: flex;
    height: 100%;
    transition: transform 1s ease-in-out;
}
.slide-item {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}
.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   SKRIVEMASKIN-EFFEKT FOR HERO BROWSER
   ========================================================================== */

/* Legger til en blinkende skrivemarkør når .is-typing-klassen er aktiv */
.browser-url.is-typing::after {
    content: '|';
    display: inline-block;
    vertical-align: baseline;
    animation: blink-caret 0.75s step-end infinite;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 2px;
}

@keyframes blink-caret {
    from, to { opacity: 0; }
    50% { opacity: 1; }
}

/* Responsivitet */
@media (max-width: 992px) {
    .hm-hero-title { font-size: 3rem; }
    #hm-browser-module { max-width: 700px; }
}

@media (max-width: 768px) {
    .hm-hero { padding: 60px 0 80px; }
    .hm-hero-title { font-size: 2.8rem; }
    .hm-hero-subtitle { font-size: 1.1rem; }
    .hm-hero-text-wrapper { margin-bottom: 40px; }
    #hm-browser-module { transform: rotateX(0deg); }
}

/* ==========================================================================
   IMMERSIV FULLSKJERMS-SEKSJON ("HARD CUT"-EFFEKT)
   ========================================================================== */

.fs-services-container {
    position: relative;
    background-color: #050819;
    /* FIKS: Økt høyde for å inkludere intro-sliden (100vh for start + 100vh per slide) */
    height: 400vh;
}

.fs-slide-wrapper {
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.fs-slides-inner {
    position: relative;
    height: 100%;
    width: 100%;
}

.fs-service-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #050819;
    opacity: 0;
    z-index: 1;
}

.fs-service-slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* Stil for selve introduksjons-sliden */
.fs-intro-slide .fs-slide-content {
    justify-content: center;
    text-align: center;
}
.fs-intro-slide h2 { font-size: 4rem; font-family: 'Space Grotesk', sans-serif; margin-bottom: 1rem; }
.fs-intro-slide p { font-size: 1.25rem; color: rgba(255, 255, 255, 0.7); max-width: 50ch; margin: 0 auto; }

.fs-slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    color: #fff;
}

.fs-slide-text {
    width: 45%;
    max-width: 500px;
}

/* Tekst (uten animasjon) */
.fs-slide-title, .fs-slide-description, .fs-slide-cta, .fs-intro-text {
    opacity: 0;
}
.fs-service-slide.is-active .fs-slide-title,
.fs-service-slide.is-active .fs-slide-description,
.fs-service-slide.is-active .fs-slide-cta,
.fs-service-slide.is-active .fs-intro-text {
    opacity: 1;
}

.fs-slide-title { font-size: 3.5rem; font-family: 'Space Grotesk', sans-serif; margin-bottom: 1rem; line-height: 1; }
.fs-slide-description { font-size: 1.2rem; line-height: 1.7; color: rgba(255, 255, 255, 0.8); margin-bottom: 2rem; }

.fs-slide-cta {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
}
.fs-slide-cta:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
}

/* Bilde-kolonnen (beholder sin animasjon) */
.fs-slide-visual {
    position: absolute;
    top: 50%;
    right: 5%;
    width: 40%;
    max-width: 500px;
    transform: translateY(-50%);
    opacity: 0;
}
.fs-service-slide.is-active .fs-slide-visual {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
.fs-slide-visual img {
    width: 700px;
    height: auto;
    filter: drop-shadow(0px 20px 40px rgba(0,0,0,0.3));
}

/* Gradient "Blobs" (uten animasjon) */
.fs-gradient-blob {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0;
    z-index: 1;
}
.fs-service-slide.is-active .fs-gradient-blob {
    opacity: 1;
}

.fs-gradient-blob.blob-1 { background: radial-gradient(circle, rgba(92, 70, 228, 0.3) 0%, rgba(92, 70, 228, 0) 70%); top: -20%; left: -20%; transform: scale(1.2) translate(40%, 40%); }
.fs-gradient-blob.blob-2 { background: radial-gradient(circle, rgba(0, 146, 255, 0.25) 0%, rgba(0, 146, 255, 0) 70%); bottom: -30%; right: -30%; transform: scale(1.3) translate(-50%, -50%); }
.fs-gradient-blob.blob-3 { background: radial-gradient(circle, rgba(61, 204, 145, 0.2) 0%, rgba(61, 204, 145, 0) 70%); top: 50%; left: 50%; transform: scale(1.4) translate(-80%, -80%); }

/* RESPONSIVITET */
@media (max-width: 992px) {
    .fs-slide-visual {
        display: none;
    }
    .fs-slide-content {
        justify-content: center;
    }
    .fs-slide-text, .fs-intro-text {
        width: 100%;
        max-width: 600px;
        text-align: center;
    }
    .fs-intro-slide h2, .fs-slide-title { font-size: 2.5rem; }
}

/* ==========================================================================
   MODERNE FOOTER
   ========================================================================== */
.site-footer {
    background-color: var(--background-dark-base);
    color: rgba(255, 255, 255, 0.6);
    padding: 80px 0 40px;
    font-size: 16px;
    position: relative;
    z-index: 10; /* Sørger for at den legger seg over alt annet sideinnhold */
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr; /* 4 kolonner med ulik bredde */
    gap: 64px;
    padding-bottom: 60px;
}

.footer-logo {
    height: 35px;
    width: auto;
    margin-bottom: 20px;
}

.footer-about p {
    line-height: 1.6;
    max-width: 300px;
}

.widget-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    margin-bottom: 12px;
}

.footer-widget a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-widget a:hover {
    color: #fff;
}

.footer-cta p {
    margin-bottom: 20px;
}

.btn-footer-cta {
    display: inline-block;
    background: #6c56f7;
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.2s;
}
.btn-footer-cta:hover {
    transform: translateY(-2px);
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright {
    font-size: 14px;
}

.footer-social {
    display: flex;
    gap: 20px;
}
.footer-social a {
    font-weight: 500;
}


/* Responsivitet for footer */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* 2x2 grid på tablet */
    }
}
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Stabler alt på mobil */
        gap: 40px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
    }
}

/* ==========================================================================
   MODERNE PROSJEKTSIDE (page-prosjekter.php)
   ========================================================================== */

/* --- Hero Seksjon for Prosjektsiden --- */
.projects-hero {
    min-height: 60vh; /* Lavere hero for undersider */
    padding: 120px 0 80px;
}

/* --- Stil for prosjekt-rutenett --- */
.modern-projects-grid-section {
    padding: 100px 0;
    background-color: #050819;
}

.modern-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* To kolonner som standard */
    gap: 40px;
}

.project-card {
    text-decoration: none;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform; /* Optimaliserer for animasjon */
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.project-card-image-wrapper {
    height: 350px;
    width: 100%;
    overflow: hidden;
}

.project-card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.project-card-content {
    padding: 24px;
}

.project-card-category {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 8px;
}

.project-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    margin: 0;
}

/* --- Responsivitet for prosjektsiden --- */
@media (max-width: 992px) {
    .modern-projects-grid {
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .modern-projects-grid {
        grid-template-columns: 1fr; /* En kolonne på mobil */
    }
    .project-card-image-wrapper {
        height: 300px; /* Justerer bildehøyde for mobil */
    }
}

/* --- Gjenbruk av CTA-seksjon fra Tjenestesiden --- */
/* (Denne kan fjernes hvis du allerede har en global .services-cta klasse) */
.services-cta {
    background-color: #0c1229; /* Litt annerledes blåtone for variasjon */
    padding: 80px 0;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.services-cta .cta-title {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 16px;
}

.services-cta .cta-subtitle {
    max-width: 500px;
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
    .services-cta .cta-title { font-size: 2rem; }
}

/* ==========================================================================
   GJENBRUKBARE STILER FOR ENKELTPROSJEKTSIDER (V2 - KORRIGERT)
   ========================================================================== */

/* --- Hero --- */
.project-hero-v2 {
    height: 65vh; background-size: cover; background-position: center;
    position: relative; display: flex; align-items: flex-end; padding: 80px 0;
}
.project-hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(5, 8, 25, 1) 0%, rgba(5, 8, 25, 0.4) 100%); z-index: 1;
}
.project-hero-content { position: relative; z-index: 2; text-align: left; }
.project-title-v2 {
    font-size: 4rem; font-weight: 800; color: #fff; margin: 0 0 16px 0;
    line-height: 1.1; font-family: 'Space Grotesk', sans-serif;
}
.project-subtitle-v2 { font-size: 1.25rem; color: rgba(255, 255, 255, 0.7); max-width: 50ch; }

/* --- Innholdsseksjoner --- */
.project-intro-section,
.project-comparison-section {
    background-color: #050819;
    padding: 100px 0;
    position: relative; /* Viktig for å holde seg i dokumentflyten */
    z-index: 5; /* Sørger for at den ligger over sticky-bakgrunner */
}

/* --- Prosjektinfo Grid --- */
.project-main-content {
    display: grid; grid-template-columns: 300px 1fr; gap: 80px; align-items: flex-start;
}
.project-details-sidebar .meta-label {
    font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.project-details-sidebar .meta-value { font-size: 1rem; color: #fff; font-weight: 500; }
.project-details-sidebar .meta-value a { color: #6c56f7; text-decoration: none; font-weight: 600; }
.project-details-sidebar .meta-item:not(:last-child) { margin-bottom: 24px; }
.project-story-content h2 { font-size: 2rem; color: #fff; margin: 0 0 16px 0; }
.project-story-content p {
    font-size: 1.1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.7); max-width: 65ch;
}

/* --- Før/Etter Grid --- */
.project-comparison-section .section-header-centered { color: #fff; }
.project-comparison-section .section-subtitle { color: rgba(255, 255, 255, 0.7); }
.project-image-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.project-image-grid-two img { width: 100%; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); }
.project-image-grid-two figcaption {
    text-align: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); margin-top: 16px;
}

/* ==========================================================================
   INTERAKTIV SCROLLING MOCKUP (V2 - KORRIGERT)
   ========================================================================== */

/* * FIKS: Denne wrapperen skaper nå et eget "univers" for sticky-elementet.
 * Den har en definert høyde som skyver innholdet nedenfor korrekt ned.
*/
.project-sticky-scroller {
    height: 180vh; /* Høyden som trengs for å scrolle gjennom hele bildet */
    position: relative; /* Etablerer en ny posisjoneringskontekst */
    background-color: #050819; /* Bakgrunnsfarge for hele scroll-området */
}

.scrolling-showcase-wrapper {
    height: 100vh; /* Tar opp hele skjermhøyden */
    width: 100%;
    position: sticky;
    top: 0; /* "Limer" seg til toppen av .project-sticky-scroller */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-container {
    width: 80%;
    max-width: 1000px;
    position: relative;
    aspect-ratio: 16 / 10; /* Beholder formen på mockupen */
}

.mockup-frame {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; pointer-events: none;
}
.mockup-frame-image { width: 100%; height: 100%; object-fit: contain; }

.mockup-scroll-content {
    position: absolute;
    top: 11.8%; left: 12.6%; width: 76.8%; height: 84%;
    border-radius: 1%; /* Liten radius for å passe bedre i rammen */
    overflow: hidden; z-index: 1;
}

.mockup-scroll-content img {
    width: 97%; height: auto; display: block;
    transform: translateY(0);
    will-change: transform;
    transition: transform 0.1s linear; /* Raskere, mer direkte transition */
}


/* --- Responsivitet --- */
@media (max-width: 992px) {
    .project-main-content { grid-template-columns: 1fr; }
    .project-details-sidebar { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 40px; }
}

@media (max-width: 768px) {
    .project-title-v2 { font-size: 2.8rem; }
    .project-image-grid-two { grid-template-columns: 1fr; }
    .project-sticky-scroller { height: 120vh; } /* Reduserer scroll-lengde på mobil */
    .mockup-container { width: 90%; }
}

/* ==========================================================================
   LUKRATIV MOBIL-SHOWCASE SEKSJON (Gjenbrukbar)
   ========================================================================== */
.project-mobile-showcase-section {
    background-color: #0c1229; /* En litt annen mørkeblå for kontrast */
    padding: 120px 0;
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.mobile-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 80px;
    justify-items: center;
}

.mobile-mockup-wrapper {
    position: relative;
    width: 100%;
    max-width: 320px; /* Optimal bredde for en mobil-mockup */
    perspective: 1500px; /* Skaper 3D-rom for rotasjon */
}

/* Selve telefon-rammen */
.mobile-mockup-frame {
    background-color: #111; /* Mørk farge for telefonen */
    border-radius: 40px; /* Avrundede hjørner */
    padding: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.1);
    border: 1px solid #444;
    transform: rotateY(-15deg) rotateX(5deg); /* Gir en subtil 3D-vinkel */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-mockup-wrapper:hover .mobile-mockup-frame {
    transform: rotateY(0) rotateX(0) scale(1.05); /* Rettes opp og zoomes ved hover */
}

/* Legger til "høyttaler-grill" for realisme */
.mobile-mockup-frame::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 5px;
    background-color: #000;
    border-radius: 10px;
    z-index: 2;
}

.mockup-image-content {
    width: 100%;
    height: 0;
    padding-bottom: 216.5%; /* Tvinger et 9:19.5 (mobil) sideforhold */
    position: relative;
    border-radius: 30px; /* Avrunding på selve skjermen */
    overflow: hidden;
}

.mockup-image-content img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mockup-caption {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 24px;
}

/* Får "Etter"-mockupen til å rotere motsatt vei */
.mobile-mockup-wrapper:nth-child(2) .mobile-mockup-frame {
    transform: rotateY(15deg) rotateX(5deg);
}
.mobile-mockup-wrapper:nth-child(2):hover .mobile-mockup-frame {
    transform: rotateY(0) rotateX(0) scale(1.05);
}

/* --- Responsivitet --- */
@media (max-width: 768px) {
    .mobile-showcase-grid {
        grid-template-columns: 1fr;
        gap: 80px; /* Mer avstand når de er stablet */
    }

    /* Fjerner 3D-effekt på mobil for en renere look */
    .mobile-mockup-frame,
    .mobile-mockup-wrapper:nth-child(2) .mobile-mockup-frame {
        transform: rotate(0);
    }
}

/* ==========================================================================
   LUKRATIV DESKTOP SHOWCASE SEKSJON (Gjenbrukbar)
   ========================================================================== */
.project-desktop-showcase-section {
    background-color: #050819;
    padding: 120px 0;
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.desktop-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 80px;
    align-items: start;
}

.desktop-window-wrapper {
    width: 100%;
}

.desktop-window {
    margin: 0;
    border-radius: 12px;
    /* Glassmorphism-effekt */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.desktop-window:hover {
    transform: translateY(-10px);
}

.window-header {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.window-dots {
    width: 55px;
    height: 12px;
    flex-shrink: 0;
    background-image: radial-gradient(circle at 6px, #ff5f56 6px, transparent 6px), 
                      radial-gradient(circle at 27px, #ffbd2e 6px, transparent 6px), 
                      radial-gradient(circle at 48px, #27c93f 6px, transparent 6px);
}

.window-title {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 auto;
    font-weight: 500;
}

.window-content {
    padding: 16px;
    line-height: 0; /* Fjerner unødvendig mellomrom under bildet */
}

.window-content img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    /* Bevarer det originale sideforholdet til 768x408 */
    aspect-ratio: 768 / 408;
    object-fit: cover;
}

.window-caption {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 24px;
}

/* --- Responsivitet --- */
@media (max-width: 992px) {
    .desktop-showcase-grid {
        grid-template-columns: 1fr;
        gap: 80px;
        max-width: 600px; /* Begrenser bredden for en bedre visning */
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   PROSJEKTSIDE: KEY FEATURE SHOWCASE (Gjenbrukbar)
   ========================================================================== */
.project-feature-showcase-section {
    padding: 120px 0;
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax-effekt */
}

.feature-showcase-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(5, 8, 25, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.feature-showcase-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
    color: #fff;
}

.feature-text .section-title {
    text-align: left;
}

.feature-text .section-subtitle {
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.image-comparison-slider {
    border-radius: 12px;
    overflow: hidden;
    line-height: 0; /* Fjerner rart mellomrom under slideren */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.slider-caption {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 16px;
}


/* ==========================================================================
   PROSJEKTSIDE: MULTI-VIEW MOBIL-GRID
   ========================================================================== */

/* Justering for å vise flere mobiler i bredden */
.mobile-showcase-grid.multi-view {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Fjerner 3D-vinklingen for en renere grid-visning */
.multi-view .mobile-mockup-frame {
    transform: rotateY(0) rotateX(0);
}
.multi-view .mobile-mockup-wrapper:hover .mobile-mockup-frame {
    transform: scale(1.05); /* Beholder hover-effekten */
}


/* --- Responsivitet for nye seksjoner --- */
@media (max-width: 992px) {
    .feature-showcase-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .feature-text {
        text-align: center;
    }
    .feature-text .section-title, .feature-text .section-subtitle {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .mobile-showcase-grid.multi-view {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   PROSJEKTSIDE: LOKAL TILSTEDEVÆRELSE (Gjenbrukbar)
   ========================================================================== */
.project-local-presence-section {
    padding: 120px 0;
    background-color: #0c1229; /* Samme blåfarge som mobil-showcase */
    position: relative;
    z-index: 5;
}

.local-presence-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    color: #fff;
}

.local-presence-text .section-title,
.local-presence-text .section-subtitle {
    text-align: left;
}

.local-presence-text .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.local-presence-cards {
    display: grid;
    gap: 24px;
}

.location-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    backdrop-filter: blur(10px);
}

.location-city {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.location-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
}

.location-details span {
    font-size: 1rem;
    font-weight: 500;
}

/* --- Responsivitet --- */
@media (max-width: 992px) {
    .local-presence-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .local-presence-text {
        text-align: center;
    }
    .local-presence-text .section-title,
    .local-presence-text .section-subtitle {
        text-align: center;
    }
}

/* ==========================================================================
   PROSJEKTSIDE: CONTENT SHOWCASE GRID (Gjenbrukbar for 16:9 bilder)
   ========================================================================== */
.project-content-showcase-section {
    padding: 120px 0;
    background-color: #0c1229;
    position: relative;
    z-index: 5;
}

.content-showcase-grid {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Et 12-kolonners grid for fleksibilitet */
    gap: 32px;
    align-items: center;
}

.showcase-item {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    line-height: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.showcase-item:hover {
    transform: translateY(-10px) scale(1.03);
    z-index: 10;
}

.showcase-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Plassering av elementene i gridden */
.showcase-item:nth-child(1) {
    grid-column: 1 / span 7; /* Tar 7 av 12 kolonner */
    grid-row: 1;
}

.showcase-item:nth-child(2) {
    grid-column: 8 / span 5; /* Tar 5 av 12 kolonner */
    grid-row: 1;
}

.showcase-item:nth-child(3) {
    grid-column: 1 / span 5;
    grid-row: 2;
    margin-top: -10%; /* Skaper en overlappende, "Masonry"-effekt */
}

.showcase-item:nth-child(4) {
    grid-column: 6 / span 7;
    grid-row: 2;
}


/* --- Responsivitet --- */
@media (max-width: 992px) {
    .showcase-item:nth-child(3) {
         margin-top: 0;
    }
}

@media (max-width: 768px) {
    .content-showcase-grid {
        grid-template-columns: 1fr; /* Stabler alt i én kolonne på mobil */
        gap: 40px;
    }

    /* Nullstiller grid-plassering for mobil */
    .showcase-item:nth-child(1),
    .showcase-item:nth-child(2),
    .showcase-item:nth-child(3),
    .showcase-item:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
        margin-top: 0;
    }
}

/* ==========================================================================
   MODERNE KONTAKTSIDE
   ========================================================================== */

/* --- Hero --- */
.contact-hero {
    min-height: 60vh;
}

/* --- Innholdsseksjon --- */
.modern-contact-section {
    padding: 120px 0;
    background-color: #050819;
    position: relative;
    z-index: 5;
}

.modern-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: flex-start;
}

/* --- Venstre kolonne (Info) --- */
.contact-info-wrapper {
    color: #fff;
}

.contact-info-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.contact-info-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 40px;
}

.contact-details-list {
    display: grid;
    gap: 24px;
}

.contact-detail-item {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease;
}

.contact-detail-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.contact-icon {
    font-size: 1.5rem;
}

.contact-text strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.contact-text span {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Høyre kolonne (Skjema) --- */
.modern-form-wrapper {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px;
}

/* --- Styling for WPForms --- */
.modern-form-wrapper .wpforms-form .wpforms-field-label {
    color: #fff;
    font-weight: 500;
}

.modern-form-wrapper .wpforms-form input[type="text"],
.modern-form-wrapper .wpforms-form input[type="email"],
.modern-form-wrapper .wpforms-form textarea {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    padding: 14px;
}

.modern-form-wrapper .wpforms-form input[type="text"]:focus,
.modern-form-wrapper .wpforms-form input[type="email"]:focus,
.modern-form-wrapper .wpforms-form textarea:focus {
    border-color: #6c56f7;
}

.modern-form-wrapper .wpforms-form .wpforms-submit-container {
    text-align: right;
}

.modern-form-wrapper .wpforms-form button[type="submit"] {
    background-color: #fff;
    color: #050819;
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modern-form-wrapper .wpforms-form button[type="submit"]:hover {
    background-color: #ccc;
    transform: translateY(-2px);
}

/* --- Responsivitet --- */
@media (max-width: 992px) {
    .modern-contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

/* ==========================================================================
   MODERNE ARTIKKELMAL (single-post.php V3)
   ========================================================================== */

.modern-article-layout {
    color: #fff;
    padding-top: 80px; /* Gir luft under headeren */
}

/* En mindre container for optimal lesebredde */
.container.small-container {
    max-width: 720px;
}

/* --- Seksjon 1: Tittel og Metadata --- */
.article-header-v3 {
    text-align: center;
    padding: 40px 0;
}

.article-meta-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 24px;
}

.article-title-v3 {
    font-size: 3.5rem;
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.1;
    margin: 0 0 24px 0;
}

.article-excerpt {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* --- Seksjon 2: Fremhevet Bilde --- */
.article-featured-image-v3 {
    margin: 0 0 60px 0;
    line-height: 0; /* Fjerner ekstra mellomrom */
}

.article-featured-image-v3 img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: cover;
}

.image-caption {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 16px;
    text-align: center;
}

/* --- Seksjon 3: Artikkelinnhold --- */
.article-body-v3 {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

.article-body-v3 h2, .article-body-v3 h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: #fff;
    margin: 2.5em 0 1em 0;
}
.article-body-v3 h2 { font-size: 2rem; }
.article-body-v3 h3 { font-size: 1.5rem; }
.article-body-v3 p { margin-bottom: 1.5em; }
.article-body-v3 a { color: #6c56f7; text-decoration: underline; }

/* --- Seksjon 4: CTA --- */
.article-cta-section {
    padding: 80px 0 120px 0;
}

.cta-content {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 48px;
    text-align: center;
}

.cta-title {
    font-size: 2rem;
    color: #fff;
}
.cta-subtitle {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
}

/* --- Responsivitet --- */
@media (max-width: 768px) {
    .article-title-v3 { font-size: 2.5rem; }
    .article-excerpt { font-size: 1.1rem; }
    .cta-content { padding: 32px; }
}

/* ==========================================================================
   MODERNE TJENESTESIDE
   ========================================================================== */

/* --- Hero --- */
.tjenester-hero {
    min-height: 70vh;
}

/* --- Seksjon 2: Vår Prosess --- */
.modern-process-section {
    padding: 120px 0;
    background-color: #050819;
    color: #fff;
    position: relative;
    z-index: 5;
}

.process-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 80px;
    position: relative;
}

/* Stiplede linjer mellom stegene */
.process-flow::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 20%;
    right: 20%;
    height: 2px;
    background-image: linear-gradient(to right, rgba(255,255,255,0.2) 50%, transparent 50%);
    background-size: 16px 2px;
    z-index: 1;
}

.process-step-v2 {
    text-align: center;
    position: relative;
    z-index: 2;
}

.process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #0c1229;
    border: 2px solid rgba(255, 255, 255, 0.1);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: #fff;
}

.process-title-v2 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.process-step-v2 p {
    color: rgba(255, 255, 255, 0.7);
    max-width: 300px;
    margin: 0 auto;
}

/* --- Seksjon 3: Våre Tjenester --- */
.modern-services-showcase {
    padding: 120px 0;
    background-color: #0c1229; /* Litt lysere blå for variasjon */
    position: relative;
    z-index: 5;
}

.services-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.service-card-v2 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    color: #fff;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.service-card-v2:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.1);
}

.service-card-title {
    font-size: 1.5rem;
    margin: 0 0 16px 0;
}

.service-card-v2 p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 24px;
}

.service-card-features {
    list-style: none;
    padding: 24px 0 0 0;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.service-card-features li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
}

.service-card-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #3dcc91; /* Grønt sjekkmerke */
}

/* --- Responsivitet --- */
@media (max-width: 992px) {
    .process-flow,
    .services-grid-v2 {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .process-flow::before {
        display: none; /* Skjuler linjen når kortene stables */
    }
}