/* ==========================================================================
   1. GLOBALE REGLER & FONTER
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #111417;
    color: #F4F5F7;
    line-height: 1.6;
    overflow-x: hidden;
}
h1, h2, h3, h4, .font-tech {
    font-family: 'Space Grotesk', sans-serif;
}
a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Container og felles layout */
.container {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.section-padding {
    padding: 5rem 0;
}
.bg-alt {
    background-color: #181c20;
    border-top: 1px solid #2d3139;
    border-bottom: 1px solid #2d3139;
}
.section-tag {
    font-size: 0.75rem;
    color: #D9531E;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 2rem;
    display: block;
}

/* ==========================================================================
   2. HOVEDELEMENTER (NAVIGASJON & KNAPPER)
   ========================================================================== */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(17, 20, 23, 0.95);
    border-bottom: 1px solid #2d3139;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-logo {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
}
.nav-links {
    display: flex;
    gap: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
}
.nav-links a:hover, .nav-special {
    color: #D9531E;
}
.nav-divider {
    border-left: 1px solid #3d414a;
    padding-left: 1.5rem;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.btn {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1rem 2rem;
    text-align: center;
    display: inline-block;
}
.btn-outline {
    border: 1px solid #4b5563;
}
.btn-outline:hover {
    border-color: #D9531E;
    color: #D9531E;
}
.btn-primary {
    background-color: #D9531E;
    color: #fff;
}
.btn-primary:hover {
    background-color: #b84214;
}

/* ==========================================================================
   3. PC-LAYOUTS (GRID-STRUKTURER)
   ========================================================================== */
/* Header */
.main-header {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 6rem 0;
}
.hero-status {
    font-size: 0.85rem;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.15em;
    border-bottom: 1px solid #2d3139;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}
.main-header h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.hero-pitch {
    font-size: 1.75rem;
    color: #D9531E;
    font-weight: 500;
    margin-bottom: 2rem;
}
.hero-line {
    height: 4px;
    width: 80px;
    background-color: #D9531E;
    margin-bottom: 2rem;
}
.hero-text-wrapper {
    max-width: 750px;
}
.hero-text {
    color: #9ca3af;
    margin-bottom: 3rem;
}
.header-image-box img {
    width: 100%;
    max-width: 320px;
    border: 1px solid #2d3139;
    filter: grayscale(100%);
    display: block;
    margin-left: auto;
}

/* Profil & Asfalten */
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.profile-card { border-top: 1px solid #4b5563; padding-top: 1.5rem; }
.profile-card h3 { font-size: 1.1rem; text-transform: uppercase; margin-bottom: 1rem; color: #fff; }
.profile-card p, .profile-card ul { font-size: 0.9rem; color: #9ca3af; list-style: none; }
.profile-card li { margin-bottom: 0.75rem; }
.profile-card strong { color: #fff; }

.asfalten-box { border: 1px solid #D9531E; background-color: #181c20; padding: 3rem; }
.asfalten-box h2 { font-size: 1.5rem; color: #fff; text-transform: uppercase; border-bottom: 1px solid #2d3139; padding-bottom: 1rem; margin-bottom: 2.5rem; }
.asfalten-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; }
.asfalten-card h3 { font-size: 1rem; color: #D9531E; text-transform: uppercase; margin-bottom: 0.5rem; }
.asfalten-card p { font-size: 0.9rem; color: #9ca3af; }
.asfalten-quote { margin-top: 3.5rem; border-top: 1px solid #2d3139; padding-top: 2rem; text-align: center; }
.asfalten-quote p { font-size: 1.15rem; color: #fff; font-style: italic; }

/* Systemarkitektur */
.tech-intro { font-size: 0.9rem; color: #9ca3af; margin-bottom: 3rem; }
.tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.tech-box { background-color: #181c20; border: 1px solid #2d3139; padding: 2rem; }
.tech-box .box-tag { font-size: 0.75rem; color: #6b7280; display: block; margin-bottom: 0.5rem; font-weight: 700; }
.tech-box h3 { font-size: 1.2rem; color: #fff; margin-bottom: 1rem; }
.tech-box p { font-size: 0.9rem; color: #9ca3af; }
.tech-box.special-border { border: 1px dashed #D9531E; }
.tech-box .box-tag.special-tag { color: #D9531E; }

/* Milepæler & Samfunn */
.case-item { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; border-bottom: 1px solid #2d3139; padding-bottom: 3rem; margin-bottom: 3rem; }
.case-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.case-meta .case-number { font-size: 2rem; font-weight: 700; color: #4b5563; display: block; }
.case-meta h3 { font-size: 1.3rem; color: #fff; text-transform: uppercase; margin-bottom: 0.5rem; }
.case-meta .case-year { font-size: 0.75rem; color: #D9531E; font-weight: 700; }
.case-content { font-size: 0.9rem; color: #9ca3af; }
.case-content .case-lead { font-size: 1.05rem; color: #e5e7eb; font-weight: 500; margin-bottom: 1rem; }
.case-content p { margin-bottom: 1rem; }

.samfunn-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; }
.samfunn-content-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.samfunn-box h3 { font-size: 1rem; color: #fff; margin-bottom: 0.5rem; }
.samfunn-box p { font-size: 0.9rem; color: #9ca3af; }

/* Rådgivning */
.ip-wrapper { max-width: 850px; margin: 0 auto; }
.ip-wrapper h2 { font-size: 2rem; color: #fff; text-transform: uppercase; margin-bottom: 1.5rem; }
.ip-list { list-style: none; color: #9ca3af; font-size: 0.95rem; margin-bottom: 3rem; }
.ip-list li { margin-bottom: 1.5rem; padding-left: 1.5rem; position: relative; }
.ip-list span { color: #D9531E; position: absolute; left: 0; }
.ip-list strong { color: #fff; }
.ip-notice { background-color: #181c20; border: 1px solid #2d3139; padding: 1.5rem; text-align: center; border-left: 4px solid #D9531E; }

/* Side 2 Spesifikke Layouts */
.link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.link-card { background: #181c20; border: 1px solid #2d3139; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; }
.link-card:hover { border-color: #D9531E; }
.link-meta { font-size: 0.75rem; color: #6b7280; text-transform: uppercase; font-weight: 700; margin-bottom: 0.5rem; }
.link-card h4 { font-size: 1.2rem; color: #fff; margin-bottom: 0.75rem; }
.link-card p { font-size: 0.9rem; color: #9ca3af; margin-bottom: 1.5rem; }
.action-link { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: #D9531E; display: inline-block; }
.action-link:hover { color: #fff; }
.doc-card { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; background: #181c20; border: 1px dashed #4b5563; padding: 3rem; align-items: center; }
.doc-card:hover { border-color: #D9531E; }
.doc-preview-holder { background: #111417; border: 1px solid #2d3139; aspect-ratio: 1 / 1.41; display: flex; align-items: center; justify-content: center; color: #4b5563; font-size: 0.8rem; text-transform: uppercase; font-weight: 700; }
.video-container { max-width: 850px; margin: 0 auto; background: #181c20; border: 1px solid #2d3139; padding: 1rem; }
.video-ratio { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Footer */
footer { padding: 4rem 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: #6b7280; border-top: 1px solid #2d3139; }
footer .footer-brand h4 { font-size: 0.9rem; color: #fff; text-transform: uppercase; margin-bottom: 0.25rem; }
footer .footer-contact { text-align: right; font-size: 0.85rem; }
footer .footer-contact p { margin-bottom: 0.25rem; }
footer .footer-contact span { color: #d1d5db; }

/* ==========================================================================
   4. RIGIDE & TRYGGE MOBILREGLER (< 900PX)
   ========================================================================== */
@media (max-width: 900px) {
    body {
        overflow-x: hidden !important;
    }
    nav { 
        flex-direction: column !important; 
        gap: 1rem !important; 
        text-align: center !important; 
        padding: 1rem !important; 
    }
    .nav-links { 
        display: flex !important; 
        flex-wrap: wrap !important; 
        justify-content: center !important; 
        gap: 1rem !important; 
        font-size: 0.75rem !important; 
    }
    .nav-divider { 
        border-left: none !important; 
        padding-left: 0 !important; 
    }
    
    /* Knuser all grid i toppheaderen på mobil */
    .main-header { 
        display: block !important; 
        padding: 3rem 0 !important; 
    }
    .main-header h1 { 
        font-size: 2.2rem !important; 
        line-height: 1.2 !important; 
        white-space: normal !important; 
        word-wrap: break-word !important;
    }
    .hero-text-wrapper {
        max-width: 100% !important;
    }

.header-image-box {
text-align: center !important;
margin-top: 3rem !important;
}
.header-image-box img {
margin: 0 auto !important;
max-width: 240px !important;
}
.asfalten-box {
padding: 1.5rem !important;
}
.asfalten-box h2 {
font-size: 1.2rem !important;
margin-bottom: 1.5rem !important;
}
.asfalten-quote p {
font-size: 1rem !important;
}
.doc-card {
grid-template-columns: 1fr !important;
padding: 1.5rem !important;
}
.doc-preview-holder {
max-width: 180px;
margin: 0 auto;
}
/* Sikkerhetsventilen: Tvinger samtlige grider over i en ren, enkel kolonne */
.profile-grid, .asfalten-grid, .tech-grid, .case-item, .samfunn-grid, .samfunn-content-split, .link-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
footer {
flex-direction: column !important;
align-items: flex-start !important;
gap: 2rem !important;
}
footer .footer-contact {
text-align: left !important;
}
}