/*
Theme Name: Verdis
Theme URI: http://example.com/verdis
Author: Jesper
Description: Custom theme for Verdis development
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: verdis
*/

:root {
    --indigo: #295387;
    --green: #08A64A;
    --nyanza: #F6FAF3;
    --white: #fff;
    --ink: #295387;
    --soft: #e6efe6;
    --max: 1240px;
    --shadow: 0 14px 38px rgba(41, 83, 135, .12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--nyanza);
    color: var(--indigo);
    font-family: "HK Grotesk", "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.58;
}

/* Fix for WordPress admin bar */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

a {
    color: inherit;
}

button {
    font: inherit;
}

.shell {
    width: min(var(--max), calc(100% - 56px));
    margin: 0 auto;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(246, 250, 243, .96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(41, 83, 135, .12);
}

.header-inner {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

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

.brand img {
    height: 58px;
    width: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav a {
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: .065em;
    font-weight: 700;
    position: relative;
    padding: 30px 0 25px;
}

.nav a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 19px;
    height: 3px;
    background: var(--green);
    transition: .25s;
}

.nav a:hover:after,
.nav a.active:after {
    right: 0;
}

.hamb {
    display: none;
    border: 0;
    background: transparent;
    color: var(--indigo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Hero Component */
.hero {
    min-height: 690px;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.hero .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.66) brightness(.62) contrast(.94);
}

.hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(41, 83, 135, .95) 0%, rgba(41, 83, 135, .88) 48%, rgba(41, 83, 135, .64) 76%, rgba(41, 83, 135, .42) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 120px 0 86px;
    color: var(--nyanza);
    max-width: 1050px;
}

.hero-kicker,
.eyebrow {
    font-family: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    font-size: 13px;
}

.hero h1 {
    font-family: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: .96;
    margin: 14px 0 24px;
    font-size: clamp(56px, 7vw, 105px);
    max-width: 760px;
}

.hero h1 span {
    color: var(--nyanza);
    display: block;
}

.hero .lead {
    font-size: 22px;
    max-width: 720px;
    font-style: italic;
    margin: 0 0 28px;
}

.hero-note {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .08em;
}

.hero-note:before {
    content: "";
    width: 58px;
    height: 3px;
    background: var(--green);
}

/* Common Sections */
.section {
    padding: 92px 0;
}

.section.white {
    background: #fff;
}

.section.blue {
    background: var(--indigo);
    color: var(--nyanza);
}

.section.green {
    background: var(--green);
    color: #fff;
}

.section-head {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 54px;
}

.section-head h2,
.cta h2,
.roadmap h2 {
    font-family: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
    font-size: clamp(38px, 4.6vw, 68px);
    font-weight: 500;
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 8px 0 0;
}

.section-head p {
    margin: 0;
    max-width: 520px;
}

.intro-large {
    font-size: 24px;
    line-height: 1.45;
    max-width: 850px;
}

.accentline {
    display: block;
    width: 72px;
    height: 5px;
    background: var(--green);
    margin-bottom: 26px;
}

/* KPI Band */
.kpi-band {
    background: var(--indigo);
    color: var(--nyanza);
    padding: 68px 0;
}

.kpi-bridge {
    display: grid;
    grid-template-columns: .8fr 1.4fr 1fr;
    gap: 34px;
    align-items: end;
    padding-bottom: 38px;
    margin-bottom: 38px;
    border-bottom: 1px solid rgba(246, 250, 243, .28);
}

.kpi-bridge h2 {
    font-family: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
    text-transform: uppercase;
    font-size: clamp(30px, 3.7vw, 52px);
    line-height: 1.02;
    font-weight: 500;
    margin: 0;
}

.kpi-bridge p {
    margin: 0;
    font-size: 15px;
    max-width: 360px;
}

.kpi-bridge .eyebrow {
    color: var(--green);
}

.kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 38px;
}

.kpi {
    border-left: 1px solid rgba(246, 250, 243, .34);
    padding-left: 26px;
}

.kpi:first-child {
    border-left: 0;
    padding-left: 0;
}

.kpi strong {
    display: block;
    font-family: "HK Grotesk", Arial, sans-serif;
    font-size: clamp(50px, 6vw, 82px);
    line-height: 1;
    color: var(--green);
    font-weight: 800;
    letter-spacing: -.04em;
}

.kpi span {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    max-width: 210px;
}

.kpi small {
    display: block;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11px;
    margin-bottom: 8px;
    opacity: .8;
}

/* Feature Stack */
.feature-stack {
    display: grid;
    gap: 62px;
}

.feature {
    display: grid;
    grid-template-columns: 1.14fr .86fr;
    min-height: 475px;
    background: #fff;
}

.feature:nth-child(even) {
    grid-template-columns: .86fr 1.14fr;
}

.feature:nth-child(even) .feature-media {
    order: 2;
}

.feature-media {
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.feature-media img {
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: contain;
    display: block;
}

.feature-copy {
    padding: 58px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-copy .num {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--green);
}

.feature-copy h3 {
    font-family: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 1.05;
    font-weight: 500;
    margin: 15px 0 20px;
}

.feature-copy p {
    margin: 0 0 24px;
}

.text-link {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    color: var(--indigo);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid var(--green);
    padding-bottom: 4px;
    text-decoration: none;
}

/* Proof List */
.proof-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 70px;
    border-top: 1px solid rgba(41, 83, 135, .25);
}

.proof-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 22px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(41, 83, 135, .25);
    align-items: start;
}

.proof-item .n {
    font-family: "Libre Franklin", sans-serif;
    color: var(--green);
    font-size: 28px;
}

.proof-item h3 {
    font-family: "Libre Franklin", sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 7px;
}

.proof-item p {
    margin: 0;
    font-size: 15px;
}

.proof-details {
    width: 100%
}

.proof-details summary {
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    list-style: none
}

.proof-details summary::-webkit-details-marker {
    display: none
}

.proof-title {
    font-family: "Libre Franklin", sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700
}

.proof-more {
    flex-shrink: 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--indigo);
    border-bottom: 2px solid var(--green)
}

.proof-details[open] .proof-more {
    font-size: 0
}

.proof-details[open] .proof-more::after {
    content: "Luk −";
    font-size: 12px
}

.proof-expanded {
    padding: 12px 0 0
}

.proof-expanded p {
    font-size: 15px;
    margin: 0 0 10px
}

.proof-details summary:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 5px
}

/* Value Grid */
.value-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.value-img {
    background: white;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.value-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: #fff;
}

.value-caption {
    padding: 22px 26px;
}

.value-caption strong {
    font-family: "Libre Franklin", sans-serif;
    text-transform: uppercase;
    font-size: 18px;
}

.value-caption p {
    margin: 7px 0 0;
    font-size: 14px;
}

/* Audiences */
.audiences {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(41, 83, 135, .25);
}

.audience {
    padding: 36px 32px 38px 0;
    border-bottom: 1px solid rgba(41, 83, 135, .25);
    border-right: 1px solid rgba(41, 83, 135, .25);
}

.audience+.audience {
    padding-left: 32px;
}

.audience:last-child {
    border-right: 0;
}

.audience h3 {
    font-family: "Libre Franklin", sans-serif;
    text-transform: uppercase;
    font-size: 28px;
    margin: 0 0 12px;
}

.audience p {
    min-height: 78px;
}

.audience a {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .05em;
    text-decoration: none;
    border-bottom: 2px solid var(--green);
    padding-bottom: 3px;
}

/* Roadmap */
.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
    border-top: 1px solid rgba(246, 250, 243, .34);
}

.mile {
    padding: 34px 34px 10px 0;
    border-right: 1px solid rgba(246, 250, 243, .28);
}

.mile+.mile {
    padding-left: 34px;
}

.mile:last-child {
    border-right: 0;
}

.mile .year {
    font-family: "Libre Franklin", sans-serif;
    color: var(--green);
    font-size: 16px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mile h3 {
    font-family: "Libre Franklin", sans-serif;
    text-transform: uppercase;
    font-size: 28px;
    line-height: 1.1;
    margin: 10px 0 14px;
}

.mile ul {
    margin: 0;
    padding-left: 18px;
    font-size: 15px;
}

.mile.future {
    opacity: .92;
}

.status-pill {
    display: inline-block;
    margin-top: 18px;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Quote Band */
.quote-band {
    padding: 54px 0;
    background: var(--indigo);
    color: var(--nyanza);
}

.quote {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: center;
}

.quote blockquote {
    font-size: 29px;
    line-height: 1.3;
    font-style: italic;
    margin: 0;
    max-width: 900px;
}

.quote .mark {
    font-family: Georgia, serif;
    font-size: 120px;
    line-height: .6;
    color: var(--green);
}

/* CTA Component */
.cta {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
}

.cta a,
.btn {
    display: inline-block;
    background: var(--green);
    color: #fff;
    text-decoration: none;
    padding: 14px 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
}

.btn.outline {
    background: transparent;
    border: 1px solid var(--nyanza);
}

/* Footer */
.site-footer {
    background: #1f436f;
    color: var(--nyanza);
    padding: 58px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 50px;
}

.site-footer img {
    height: 68px;
    filter: brightness(0) invert(1);
    opacity: .9;
}

.site-footer h4 {
    font-family: "Libre Franklin", sans-serif;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.site-footer p {
    font-size: 14px;
    margin: 5px 0;
}

.site-footer a {
    text-decoration: none;
}

/* Responsive */
@media(max-width: 900px) {
    .kpi-bridge {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .shell {
        width: min(100% - 32px, var(--max));
    }

    .hamb {
        display: block;
    }

    .nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 82px;
        background: var(--nyanza);
        padding: 10px 24px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        border-bottom: 1px solid rgba(41, 83, 135, .15);
    }

    /* Adjust for admin bar if present */
    .admin-bar .nav {
        top: 114px;
    }

    .nav.open {
        display: flex;
    }

    .nav a {
        padding: 12px 0;
    }

    .hero {
        min-height: 630px;
    }

    .hero-content {
        padding: 94px 0 62px;
    }

    .section {
        padding: 65px 0;
    }

    .section-head {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .kpis {
        grid-template-columns: 1fr 1fr;
    }

    .kpi:nth-child(3) {
        border-left: 0;
        padding-left: 0;
    }

    .feature,
    .feature:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .feature:nth-child(even) .feature-media {
        order: 0;
    }

    .feature-copy {
        padding: 38px 30px;
    }

    .proof-list,
    .value-grid {
        grid-template-columns: 1fr;
    }

    .audiences,
    .roadmap-grid {
        grid-template-columns: 1fr;
    }

    .audience {
        border-right: 0;
        padding: 28px 0;
    }

    .audience+.audience {
        padding-left: 0;
    }

    .mile,
    .mile+.mile {
        padding: 28px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(246, 250, 243, .25);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .split {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pillars,
    .blue-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 560px) {
    body {
        font-size: 16px;
    }

    .brand img {
        height: 50px;
    }

    .hero h1,
    .subhero h1 {
        font-size: 48px;
    }

    .hero .lead,
    .subhero p {
        font-size: 18px;
    }

    .kpis {
        grid-template-columns: 1fr;
    }

    .kpi {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid rgba(246, 250, 243, .25);
        padding-top: 18px;
    }

    .feature-copy h3 {
        font-size: 30px;
    }

    .quote {
        grid-template-columns: 1fr;
    }

    .quote .mark {
        display: none;
    }
}

/* Subhero & Split */
.subhero {
    min-height: 570px;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--indigo);
    color: var(--nyanza);
}

.subhero .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subhero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(41, 83, 135, .66);
}

.subhero.noimg:after {
    display: none;
}

.subhero-content {
    position: relative;
    z-index: 2;
    padding: 110px 0 74px;
}

.subhero h1 {
    font-size: clamp(48px, 6vw, 86px);
    max-width: 1000px;
}

.subhero p {
    max-width: 750px;
    font-size: 21px;
    font-style: italic;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.split img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    display: block;
}

/* Pillars & Grid */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pillar {
    padding: 32px 0;
    border-top: 4px solid var(--green);
}

.pillar h3 {
    font-family: "Libre Franklin", sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    margin: 0 0 11px;
}

.pillar p {
    margin: 0;
}

.blue-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.blue-card {
    border-top: 3px solid var(--green);
    padding-top: 22px;
}

.blue-card h3 {
    font-family: "Libre Franklin", sans-serif;
    text-transform: uppercase;
    margin: 0 0 12px;
    font-size: 22px;
}

.blue-card p {
    font-size: 15px;
    margin: 0;
}

/* Verdis Values */
.verdis-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.verdis-value {
    border-top: 4px solid var(--green);
    padding: 24px 10px 12px 0;
}

.verdis-value-number {
    display: block;
    color: var(--green);
    font-family: "Libre Franklin", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 18px;
}

.verdis-value h3 {
    font-family: "Libre Franklin", Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(18px, 1.85vw, 25px);
    line-height: 1.15;
    margin: 0 0 14px;
}

.verdis-value p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

@media(max-width: 950px) {
    .verdis-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width: 560px) {
    .verdis-values {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .verdis-value {
        padding: 18px 0;
    }

    .verdis-value-number {
        margin-bottom: 8px;
    }
}

/* Campaign Section */
.campaign-section {
    background: #edf4ec;
    color: var(--indigo);
    padding: 44px 0 52px;
    border-bottom: 1px solid rgba(41, 83, 135, .12);
}

.campaign-top {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(41, 83, 135, .18);
    padding-bottom: 18px;
}

.campaign-hint {
    font-size: 13px;
    opacity: .7;
}

.campaign-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, .55fr);
    gap: 44px;
    align-items: end;
    min-height: 245px;
    padding-top: 24px;
}

.campaign-category {
    font-size: 12px;
    color: #087839;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    margin: 0 0 13px;
}

.campaign-copy h2 {
    font-family: "Libre Franklin", Arial, sans-serif;
    font-size: clamp(30px, 3.5vw, 49px);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.06;
    margin: 0 0 13px;
    max-width: 780px;
}

.campaign-copy>p:not(.campaign-category) {
    max-width: 690px;
    margin: 0 0 23px;
    font-size: 17px;
}

.campaign-button {
    display: inline-flex;
    align-items: center;
    gap: 19px;
    background: var(--green);
    color: white !important;
    padding: 11px 18px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.campaign-button:focus-visible,
.campaign-controls button:focus-visible {
    outline: 3px solid #295387;
    outline-offset: 4px;
}

.campaign-side {
    border-left: 1px solid rgba(41, 83, 135, .25);
    padding-left: 30px;
}

.campaign-index {
    font-weight: 800;
    color: #087839;
    font-size: 14px;
}

.campaign-side p {
    font-size: 14px;
    line-height: 1.5;
}

.campaign-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 22px;
}

.campaign-controls button {
    cursor: pointer;
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--indigo);
    background: transparent;
    color: var(--indigo);
    border-radius: 50%;
    font-weight: 800;
}

.campaign-controls button.active {
    background: var(--indigo);
    color: white;
}

.campaign-controls .campaign-pause {
    margin-left: 6px;
    border-radius: 6px;
}

.instant-offer {
    background: #fff;
    border-top: 4px solid var(--green);
    padding: 36px 40px;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    align-items: center;
}

.instant-offer h2 {
    font-family: "Libre Franklin", Arial, sans-serif;
    font-size: clamp(25px, 3vw, 39px);
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.1;
    margin: 8px 0;
}

.instant-offer p {
    max-width: 620px;
    margin: 0;
}

.instant-offer a {
    white-space: nowrap;
}

@media(max-width: 800px) {
    .campaign-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: 0;
    }

    .campaign-side {
        border-left: 0;
        border-top: 1px solid rgba(41, 83, 135, .25);
        padding: 16px 0 0;
    }

    .campaign-side p {
        display: none;
    }

    .campaign-controls {
        margin-top: 12px;
    }

    .instant-offer {
        display: block;
        padding: 25px;
    }

    .instant-offer a {
        margin-top: 18px;
    }
}

/* Reference Section */
.vr-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr);
    gap: 40px;
    align-items: end;
    margin: 0 0 34px;
}

.vr-head .eyebrow {
    margin-bottom: 13px;
    color: var(--green);
}

.vr-head h2 {
    font-family: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: clamp(34px, 4.25vw, 60px);
    letter-spacing: .015em;
    line-height: 1.02;
    margin: 0;
}

.vr-lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #475b54;
    max-width: 480px;
}

.vr-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 19px;
}

.vr-card {
    appearance: none;
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-top: 4px solid var(--green);
    padding: 10px 0 0;
    margin: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font: inherit;
    min-width: 0;
}

.vr-card:focus-visible {
    outline: 3px solid var(--indigo);
    outline-offset: 4px;
}

.vr-image {
    background: #e2ebe3;
    overflow: hidden;
    display: block;
}

.vr-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.1/1;
    object-fit: contain;
}

.vr-cardcopy {
    display: block;
    padding-top: 16px;
}

.vr-city {
    display: block;
    font-family: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.15;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 7px;
}

.vr-theme {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: #546c60;
}

.vr-more {
    display: inline-block;
    margin-top: 12px;
    font-family: "Libre Franklin", Arial, sans-serif;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .06em;
    font-weight: 750;
    color: #2d6e4e;
}

.vr-card:hover .vr-more {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vr-caption {
    font-size: 12px;
    color: #60756a;
    margin: 25px 0 0;
}

.vr-swipe {
    display: none;
}

.vr-dialog {
    padding: 0;
    border: 0;
    border-top: 6px solid var(--green);
    background: #fff;
    color: #193e35;
    box-shadow: 0 25px 75px rgba(0, 0, 0, .23);
    width: min(880px, calc(100vw - 36px));
    max-height: min(88vh, 850px);
    overflow: auto;
}

.vr-dialog::backdrop {
    background: rgba(6, 27, 19, .60);
}

.vr-dialog-inner {
    display: grid;
    grid-template-columns: minmax(260px, .88fr) 1fr;
    gap: 0;
}

.vr-dialog-img {
    background: #e6eee6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vr-dialog-img img {
    display: block;
    width: 100%;
    height: auto;
}

.vr-dialog-copy {
    padding: 42px 38px 38px;
}

.vr-dialog-copy h3 {
    font-family: "Libre Franklin", Arial, sans-serif;
    font-size: clamp(26px, 2.9vw, 40px);
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--indigo);
    margin: 0 0 14px;
}

.vr-dialog-copy .vr-subhead {
    font-family: "Libre Franklin", Arial, sans-serif;
    font-size: 20px;
    line-height: 1.22;
    font-weight: 650;
    margin: 0 0 17px;
    color: #184734;
}

.vr-dialog-copy p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 14px;
    color: #486057;
}

.vr-dialog-close {
    display: inline-block;
    border: 1px solid #8ca99b;
    background: transparent;
    padding: 11px 15px;
    color: #194b34;
    font-family: "Libre Franklin", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    margin-top: 16px;
}

@media(max-width: 960px) {
    .vr-head {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .vr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 18px;
    }
}

@media(max-width: 650px) {
    .vr-head h2 {
        font-size: 36px;
    }

    .vr-grid {
        display: flex;
        overflow-x: auto;
        gap: 18px;
        scroll-snap-type: x mandatory;
        padding-bottom: 16px;
    }

    .vr-card {
        flex: 0 0 min(72vw, 270px);
        scroll-snap-align: start;
    }

    .vr-swipe {
        display: inline;
    }

    .vr-dialog-inner {
        grid-template-columns: 1fr;
    }

    .vr-dialog-copy {
        padding: 23px 22px 27px;
    }
}

/* Viden Section (Verdis Viden) */
.vv-intro {
    max-width: 900px;
    margin: 0 0 28px;
}

.vv-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 26px 0 12px;
}

.vv-card {
    border: 1px solid #d9e2db;
    border-radius: 16px;
    padding: 20px;
    background: #fff;
    min-width: 0;
    box-shadow: 0 8px 25px rgba(24, 53, 37, .035);
}

.vv-card h3 {
    font-size: clamp(19px, 1.65vw, 25px);
    margin: 0 0 8px;
}

.vv-card p {
    font-size: 14px;
    line-height: 1.48;
    color: #647069;
    margin: 4px 0 0;
}

.vv-chart {
    width: 100%;
    height: auto;
    display: block;
    margin: 12px 0 8px;
}

.vv-chart text {
    font-family: Arial, Helvetica, sans-serif;
    fill: #586b60;
    font-size: 11px;
}

.vv-disclaimer {
    font-size: 12px;
    color: #637368;
    text-align: center;
    margin: 15px 0 30px;
}

.vv-workshop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    background: #edf3ed;
    border-radius: 15px;
    padding: 24px 26px;
}

.vv-workshop strong {
    font-size: 18px;
}

.vv-workshop p {
    margin: 7px 0 0;
    max-width: 660px;
    font-size: 15px;
}

.vv-btn {
    border: 0;
    cursor: pointer;
    border-radius: 8px;
    padding: 15px 21px;
    background: #164d35;
    color: #fff;
    font-weight: 650;
    font-size: 15px;
    white-space: nowrap;
}

.vv-btn:hover {
    background: #236747;
}

#vv-dialog {
    border: 0;
    border-radius: 17px;
    padding: 0;
    max-width: min(95vw, 530px);
    width: 100%;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .22);
}

#vv-dialog::backdrop {
    background: rgba(12, 30, 21, .55);
}

#vv-dialog .vv-formwrap {
    padding: 28px;
}

#vv-dialog h2 {
    margin: 0 0 8px;
    font-size: 26px;
}

#vv-dialog label {
    font-size: 13px;
    font-weight: 650;
    display: block;
    margin: 14px 0 5px;
}

#vv-dialog input,
#vv-dialog select,
#vv-dialog textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #bccac1;
    border-radius: 7px;
    background: white;
    font: inherit;
}

#vv-dialog .vv-formactions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 18px;
}

#vv-dialog .vv-close {
    background: transparent;
    color: #264b37;
    border: 1px solid #aac2b2;
    cursor: pointer;
    border-radius: 8px;
    padding: 11px 17px;
}

#vv-dialog .vv-explainer {
    font-size: 12px;
    color: #5e6b61;
    margin: 12px 0 0;
}

@media(max-width: 850px) {
    .vv-cards {
        grid-template-columns: 1fr;
    }

    .vv-workshop {
        flex-direction: column;
        align-items: flex-start;
    }

    .vv-btn {
        white-space: normal;
    }
}

/* Contact Hero */
.contact-hero {
    min-height: 585px;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--indigo);
    color: #fff;
}

.contact-hero .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 44%;
}

.contact-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(41, 83, 135, .88) 0%, rgba(41, 83, 135, .72) 52%, rgba(41, 83, 135, .48) 100%);
}

.contact-hero-content {
    position: relative;
    z-index: 2;
    padding: 105px 0 70px;
    max-width: 900px;
}

.contact-hero h1 {
    font-family: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: .94;
    margin: 8px 0 24px;
    font-size: clamp(58px, 7vw, 98px);
    max-width: 680px;
}

.contact-hero p {
    font-size: 21px;
    font-style: italic;
    max-width: 650px;
    margin: 0 0 26px;
}

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

.contact-actions a {
    min-width: 145px;
    text-align: center;
}

/* Contact Directory & Tabs */
.contact-directory,
.v25-contact-directory {
    background: #f6faf3;
    padding-bottom: 88px;
}

.contact-nav-wrap {
    border-bottom: 1px solid rgba(41, 83, 135, .25);
    background: rgba(246, 250, 243, .98);
}

.contact-nav-grid {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 54px;
    align-items: center;
    min-height: 96px;
}

.contact-tabs {
    display: flex;
    align-self: stretch;
    gap: 30px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.contact-tabs::-webkit-scrollbar {
    display: none;
}

.contact-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--indigo);
    padding: 36px 0 27px;
    font-family: "Libre Franklin", sans-serif;
    text-transform: uppercase;
    letter-spacing: .035em;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}

.contact-tab:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -1px;
    height: 3px;
    background: var(--green);
    transition: .2s;
}

.contact-tab:hover:after,
.contact-tab.active:after {
    right: 0;
}

.contact-quick {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding-left: 26px;
    border-left: 1px solid rgba(41, 83, 135, .22);
    font-size: 14px;
}

.contact-quick a {
    text-decoration: none;
    font-weight: 800;
    color: var(--green);
}

.contact-quick span {
    font-size: 12px;
}

.contact-panel {
    display: none;
    padding-top: 62px;
}

.contact-panel.active {
    display: block;
}

.contact-panel-head,
.v25-panel-head {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 32px;
}

.contact-panel-head h2,
.v25-panel-head h2 {
    font-family: "Libre Franklin", sans-serif;
    text-transform: uppercase;
    font-size: clamp(32px, 4.4vw, 59px);
    line-height: 1.02;
    font-weight: 500;
    margin: 6px 0 0;
}

/* Department & People Cards */
.v25-department-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.v25-people-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 19px;
}

[data-contact-panel='afdelingsledere'] .v25-people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.v25-dept-card {
    display: flex;
    flex-direction: column;
    appearance: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: white;
    box-shadow: 0 12px 26px rgba(32, 73, 110, .07);
    color: #295387;
    text-align: left;
    transition: transform .2s, box-shadow .2s;
    min-width: 0;
}

.v25-dept-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(32, 73, 110, .13);
}

.v25-dept-pic {
    height: 158px;
    overflow: hidden;
    display: block;
    width: 100%;
    position: relative;
    background: #e5f0e7;
}

.v25-dept-pic:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(20, 58, 88, .26), transparent 75%);
}

.v25-dept-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85);
}

.v25-dept-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 18px 23px;
    flex: 1;
    width: 100%;
}

.v25-dept-no {
    font-family: 'Libre Franklin', Arial, sans-serif;
    font-size: 12px;
    color: #18924c;
    padding-top: 2px;
}

.v25-dept-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.v25-dept-text strong {
    font-family: 'Libre Franklin', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.v25-dept-text small {
    font-size: 13px;
    line-height: 1.4;
    color: #546b81;
}

.v25-dept-arrow {
    font-size: 20px;
    line-height: 1;
    color: #098d40;
}

.v25-person {
    background: white;
    border-top: 3px solid #08a64a;
    padding: 23px 21px 24px;
    min-width: 0;
    box-shadow: 0 7px 21px rgba(25, 63, 100, .045);
}

.v25-person-heading {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    min-height: 87px;
}

.v25-avatar {
    flex: none;
    width: 74px;
    height: 74px;
    overflow: hidden;
    background: #e6efe6;
    display: grid;
    place-items: center;
}

.v25-person-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
}

.v25-person-names h3 {
    font-family: 'Libre Franklin', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.28;
    text-transform: uppercase;
    margin: 1px 0 5px;
}

.v25-person-role {
    color: #5a7389;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.v25-person-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.v25-person-links a {
    font-size: 12px;
    color: #156b40;
    font-weight: 750;
    text-decoration: none;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.v25-person-links a:hover {
    text-decoration: underline;
}

.v25-directory-footer {
    margin: 38px 0 0;
    border-top: 1px solid rgba(41, 83, 135, .2);
    padding-top: 18px;
    color: #5a7389;
    font-size: 14px;
    line-height: 1.5;
}

.v25-directory-footer a {
    color: #16804b;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Search Field */
.v25-search-wrap {
    padding: 21px 24px;
    background: #e8f0e7;
    margin: 0 0 25px;
}

.v25-search-wrap label {
    font-family: 'Libre Franklin', Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .04em;
    display: block;
    margin-bottom: 11px;
}

.v25-search-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.v25-search-input-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
    min-width: min(100%, 300px);
    background: white;
    border: 1px solid rgba(41, 83, 135, .24);
    padding: 12px 15px;
}

.v25-search-input-wrap svg {
    flex: none;
    color: #3d7680;
}

#v25-contact-search {
    font-family: inherit;
    font-size: 15px;
    border: 0;
    width: 100%;
    color: #295387;
    min-width: 0;
    outline: none;
    background: white;
}

.v25-search-input-wrap:focus-within {
    outline: 2px solid #08a64a;
    outline-offset: 2px;
}

#v25-clear-search {
    border: 0;
    background: none;
    color: #0d7e42;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#v25-contact-count {
    font-size: 13px;
    color: #43637a;
    white-space: nowrap;
}

.v25-person-area {
    display: block;
    font-family: 'Libre Franklin', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .09em;
    color: #13834a;
    font-weight: 800;
    margin: 0 0 6px;
}

.v25-person-address {
    font-size: 12px;
    margin: 10px 0 13px;
    color: #576e81;
    line-height: 1.5;
    min-height: 19px;
}

/* Service Notice */
.v25-service-notice {
    margin-top: 26px;
    border-left: 5px solid #08a64a;
    background: #eaf3e9;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: center;
}

.v25-service-notice strong {
    font-size: 17px;
    font-family: 'Libre Franklin', Arial, sans-serif;
}

.v25-service-notice p {
    font-size: 14px;
    line-height: 1.55;
    margin: 8px 0 0;
    max-width: 730px;
}

.v25-service-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: none;
    white-space: nowrap;
}

.v25-service-actions a {
    color: #167c48;
    font-weight: 800;
    text-decoration: none;
    font-size: 14px;
}

.v25-service-actions a:hover {
    text-decoration: underline;
}

/* Hazard Cockpit */
#hazard-cockpit-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: #fff;
    display: none;
    flex-direction: column;
}

#hazard-cockpit-overlay.open {
    display: flex;
}

#hazard-cockpit-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;
    background: #123d32;
    color: #fff;
    font: 600 16px Arial, sans-serif;
}

#hazard-cockpit-close {
    background: white;
    color: #123d32;
    border: 0;
    border-radius: 5px;
    padding: 10px 16px;
    cursor: pointer;
}

#hazard-cockpit-frame {
    border: 0;
    width: 100%;
    flex: 1;
    min-height: 0;
}

/* Hazard Preview & Form (Erhverv) */
.haz-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin: 28px 0;
}

.haz-preview {
    background: #f4f8f5;
    border: 1px solid #d8e6dc;
    border-radius: 16px;
    padding: 25px;
}

.haz-frac {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 20px 0;
}

.haz-frac span {
    padding: 10px 12px;
    background: white;
    border: 1px solid #d7e6dc;
    border-radius: 9px;
    font-weight: 600;
    font-size: 14px;
}

.haz-check {
    list-style: none;
    padding: 0;
    margin: 13px 0;
    display: grid;
    gap: 12px;
}

.haz-check li:before {
    content: '✓';
    margin-right: 9px;
    color: #176a46;
    font-weight: bold;
}

.haz-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid #dae6de;
    border-bottom: 1px solid #dae6de;
}

.haz-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}

.haz-form label {
    display: grid;
    gap: 6px;
    font-weight: 600;
}

.haz-form input,
.haz-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px;
    border: 1px solid #bdcec3;
    border-radius: 7px;
    font: inherit;
}

.haz-form button,
.haz-form small {
    grid-column: 1/-1;
}

/* Global Form & Status Styles */
.ble-dialog-form button[type="submit"],
.haz-form button[type="submit"],
.vv-btn[type="submit"] {
    background: #174e39;
    color: #fff;
    cursor: pointer;
    border-radius: 7px;
    border: 0;
    padding: 14px;
    font-weight: 700;
}

.verdis-send-status {
    font-size: 14px;
    line-height: 1.5;
    min-height: 1.4em;
    margin: 10px 0 0;
    grid-column: 1/-1;
}

.verdis-send-status[data-state="success"] {
    color: #165e3e;
    font-weight: 700;
}

.verdis-send-status[data-state="error"] {
    color: #9c2e28;
    font-weight: 700;
}

.verdis-honey {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Proof Evidence Helper */
.proof-evidence {
    display: inline-block;
    margin: 7px 0 11px;
    padding: 4px 9px;
    border: 1px solid rgba(41, 83, 135, .22);
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    color: #295387;
    background: #f6faf3;
}

@media(max-width: 900px) {
    .contact-nav-grid {
        grid-template-columns: 1fr;
    }

    .contact-hero {
        min-height: 520px;
    }

    .v25-department-grid,
    .v25-people-grid {
        grid-template-columns: 1fr 1fr;
    }

    .v25-search-row {
        gap: 8px;
    }
}

@media(max-width: 630px) {
    .v25-department-grid,
    .v25-people-grid {
        grid-template-columns: 1fr;
    }

    .v25-department-grid {
        gap: 13px;
    }

    .v25-dept-card {
        display: grid;
        grid-template-columns: 125px 1fr;
        min-height: 105px;
    }

    .v25-dept-pic {
        height: 100%;
        min-height: 105px;
    }

    .v25-dept-body {
        padding: 19px 14px;
        gap: 9px;
    }

    .v25-dept-text strong {
        font-size: 14px;
    }

    .v25-search-wrap {
        padding: 18px 15px;
    }

    .contact-hero h1 {
        font-size: 54px;
    }

    .haz-preview-grid,
    .haz-form {
        grid-template-columns: 1fr;
    }

    .haz-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Modal System */
.modal { position: fixed; inset: 0; background: rgba(20, 42, 68, .78); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 26px; }
.modal.open { display: flex; }
.modal-card { background: var(--nyanza); width: min(980px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 40px 80px rgba(0, 0, 0, .28); position: relative; }
.modal-card img { width: 100%; height: auto; display: block; background: #fff; }
.modal-copy { padding: 42px 48px 50px; }
.modal-copy .modal-eyebrow { color: var(--indigo); margin-bottom: 14px; }
.modal-copy h2 { font-family: "Libre Franklin", sans-serif; text-transform: uppercase; font-size: 42px; line-height: 1.05; margin: 8px 0 20px; color: var(--indigo); }
.modal-copy p { margin-bottom: 1em; }
.modal-copy blockquote { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(41, 83, 135, .22); font-size: 20px; font-style: italic; }
.modal-copy blockquote strong { font-style: normal; font-size: 14px; display: block; margin-top: 5px; }
.modal-close { position: fixed; top: 26px; right: 30px; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--nyanza); color: var(--indigo); font-size: 28px; cursor: pointer; z-index: 1001; display: flex; align-items: center; justify-content: center; }

@media (max-width: 900px) {
    .modal-copy { padding: 28px; }
    .modal-copy h2 { font-size: 32px; }
    .modal-close { top: 10px; right: 10px; width: 40px; height: 40px; }
}