/* Shared night theme. It mirrors the homepage's forest palette across every page. */
html[data-theme="dark"] {
    --bg: #14251b;
    --bg-soft: #1d3023;
    --surface: #203628;
    --surface-muted: #243d2d;
    --surface-strong: #2e4b37;
    --ink: #eff5eb;
    --ink-soft: #d0dfcf;
    --muted: #b5c9b7;
    --line: #49634f;
    --line-soft: rgba(173, 201, 176, 0.18);
    --primary: #b4d0b1;
    --primary-strong: #deedd6;
    --primary-soft: #2e4935;
    --accent: #b4d0b1;
    --accent-soft: #344f3c;
    --blue: #a4cfc3;
    --header-bg: #ffffff;
    --header-border: #dce6d8;
    --proof-bg: #1d3023;
    --diagram-grid: rgba(173, 201, 176, 0.11);
    --diagram-route: #b4d0b1;
    --diagram-route-soft: rgba(180, 208, 177, 0.25);
    --diagram-node: #203628;
    --diagram-node-border: #b4d0b1;
    --star-color: #adc9b0;
    --deck-shadow: rgba(173, 201, 176, 0.08);
    --shadow: 0 26px 70px rgba(4, 18, 10, 0.38);
    --shadow-soft: 0 18px 48px rgba(4, 18, 10, 0.25);
    color-scheme: dark;
}

html[data-theme="dark"] body {
    color: var(--ink);
    background: linear-gradient(180deg, var(--bg), #102016);
}

/* The supplied logo contains a white canvas, so the header stays white in both themes. */
html[data-theme="dark"] .site-header {
    --surface: #ffffff;
    --surface-muted: #f1f5ee;
    --primary: #42694c;
    --primary-strong: #284b35;
    --primary-soft: #e5efdf;
    --accent: #42694c;
    --accent-soft: #dcead6;
    --ink: #26392d;
    --ink-soft: #435749;
    --line: #ccd9c9;
    color-scheme: light;
    color: var(--ink);
    background: #ffffff;
    border-bottom-color: #dce6d8;
    box-shadow: 0 8px 32px rgba(40, 75, 53, 0.08);
    backdrop-filter: none;
}

html[data-theme="dark"] .brand {
    width: clamp(210px, 20vw, 290px);
    min-width: 0;
}

html[data-theme="dark"] .brand-logo {
    display: block;
    width: 100%;
    height: auto;
    background: #ffffff;
}

html[data-theme="dark"] .site-header .primary-nav a {
    color: #435749;
}

html[data-theme="dark"] .site-header .primary-nav a:is(:hover, :focus-visible, .is-active) {
    color: #284b35;
    background: #e5efdf;
}

html[data-theme="dark"] .site-header :is(.nav-toggle, .language-switch, .theme-toggle) {
    color: #284b35;
    background: #ffffff;
    border-color: #ccd9c9;
}

html[data-theme="dark"] .site-header .nav-toggle span:not(.sr-only) {
    background: #284b35;
}

html[data-theme="dark"] .site-header .primary-nav {
    background-color: #ffffff;
}

html[data-theme="dark"] .site-header .site-cta.site-cta {
    color: #ffffff;
    background: #284b35;
    border-color: #284b35;
    box-shadow: 5px 5px 0 rgba(173, 201, 176, 0.32);
}

html[data-theme="dark"] .site-header .site-cta.site-cta > i {
    color: #284b35;
    background: #dcead6;
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) {
    color: var(--ink);
    background: var(--bg);
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) :is(h1, h2, h3, h4) {
    color: var(--primary-strong);
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) .eyebrow {
    color: var(--primary);
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) .feature-band {
    background: #10271b;
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) :is(.values-grid article, .service-card, .contact-form) {
    background: linear-gradient(145deg, #203628, #1b3023);
    border-color: var(--line);
    box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) .value-label {
    color: #dcead6;
    background: #2e4935;
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) .cta-band {
    background: linear-gradient(110deg, #214934, #162c1f);
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) .cta-band::before {
    background: linear-gradient(120deg, rgba(24, 57, 37, 0.98), rgba(13, 49, 29, 0.92));
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) .cta-band :is(h2, p) {
    color: #eff5eb;
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) .cta-band .button-primary {
    color: #183925;
    background: #adc9b0;
    border-color: #adc9b0;
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) .cta-band .button-secondary {
    color: #eff5eb;
    border-color: #7caaa0;
}

html[data-theme="dark"] :is(.page-website, .page-automation, .page-areas) .interactive-hero {
    border-color: #49634f;
    background: #10271b;
    box-shadow: 0 28px 72px rgba(4, 18, 10, 0.42);
}

html[data-theme="dark"] :is(.page-website, .page-automation) .automation-flow-node,
html[data-theme="dark"] :is(.page-website, .page-automation) .automation-flow-caption {
    color: #eff5eb;
    background: rgba(24, 57, 37, 0.94);
    border-color: rgba(173, 201, 176, 0.55);
}

html[data-theme="dark"] :is(.page-website, .page-automation) .automation-flow-lines path {
    stroke: rgba(180, 208, 177, 0.86);
}

html[data-theme="dark"] :is(.page-website, .page-automation) .automation-flow-lines circle {
    fill: #adc9b0;
}

/* Branded overview pages use the same variables as the homepage night palette. */
html[data-theme="dark"]:is([data-services-brand], [data-about-brand], [data-contact-brand]) {
    --cream: #14251b;
    --soft: #1d3023;
    --surface: #203628;
    --surface-muted: #243d2d;
    --ink: #eff5eb;
    --ink-soft: #d0dfcf;
    --muted: #b5c9b7;
    --line: #49634f;
    --primary: #b4d0b1;
    --primary-soft: #2e4935;
    --accent: #b4d0b1;
    --accent-soft: #344f3c;
    --bg: #14251b;
    --bg-soft: #1d3023;
}

html[data-theme="dark"]:is([data-services-brand], [data-about-brand], [data-contact-brand]),
html[data-theme="dark"]:is([data-services-brand], [data-about-brand], [data-contact-brand]) body,
html[data-theme="dark"] :is(.page-services, .page-about, .page-contact) {
    color: var(--ink);
    background: var(--cream);
}

html[data-theme="dark"] :is(.page-services, .page-about, .page-contact) :is(h1, h2, h3, h4) {
    color: #deedd6;
}

html[data-theme="dark"] :is(.page-services, .page-about, .page-contact) .eyebrow {
    color: #b4d0b1;
}

/* Services */
html[data-theme="dark"] .page-services .services-intro {
    background:
        radial-gradient(circle at 80% 18%, rgba(173, 201, 176, 0.12), transparent 34%),
        linear-gradient(135deg, #14251b, #1d3023 58%, #243d2d);
}

html[data-theme="dark"] .page-services .services-intro-media {
    opacity: 0.09;
    filter: grayscale(0.35) sepia(0.18) hue-rotate(78deg) brightness(0.72);
}

html[data-theme="dark"] .page-services .services-intro::before {
    background: linear-gradient(90deg, rgba(20, 37, 27, 0.99), rgba(20, 37, 27, 0.91) 48%, rgba(29, 48, 35, 0.76));
}

html[data-theme="dark"] .page-services .services-intro-first h1 {
    color: #deedd6;
}

html[data-theme="dark"] .page-services :is(.services-intro-paths a, .creative-service-tags li, .services-scroll-cue) {
    color: #d0dfcf;
    background: rgba(46, 73, 53, 0.82);
    border-color: #49634f !important;
}

html[data-theme="dark"] .page-services .services-intro-paths a:is(:hover, :focus-visible),
html[data-theme="dark"] .page-services .services-scroll-cue:is(:hover, :focus-visible) {
    color: #f4f8f1;
    background: #3b5c43;
    border-color: #8eae91 !important;
}

html[data-theme="dark"] .page-services :is(.website-service, .services-automation-section, .services-guidance) {
    background: var(--cream);
}

html[data-theme="dark"] .page-services :is(.website-service-offer, .services-guidance-card) {
    background:
        radial-gradient(circle at 92% 7%, rgba(173, 201, 176, 0.1), transparent 28%),
        linear-gradient(145deg, #203628, #1b3023);
    border-color: #49634f;
    box-shadow: 10px 10px 0 rgba(173, 201, 176, 0.05), var(--shadow);
}

html[data-theme="dark"] .page-services :is(.service-icon, .website-service-badge, .plan-marker, .services-guidance-options span) {
    color: #deedd6;
    background: #2e4935;
    border-color: #49634f;
}

html[data-theme="dark"] .page-services .website-service .service-note {
    color: #d0dfcf;
    background: #243d2d;
    border-left-color: #adc9b0;
}

html[data-theme="dark"] .page-services .services-automation-section {
    border-color: #49634f;
}

html[data-theme="dark"] .page-services .ppc-service {
    background:
        radial-gradient(circle at 88% 12%, rgba(173, 201, 176, 0.08), transparent 30%),
        linear-gradient(180deg, #182b20, #1b3023);
    border-color: #334d3a;
}

html[data-theme="dark"] .page-services .ppc-service-panel {
    background:
        radial-gradient(circle at 5% 100%, rgba(173, 201, 176, 0.09), transparent 34%),
        linear-gradient(145deg, #203628, #1b3023 56%, #172a1e);
    border-color: #49634f;
    box-shadow: 10px 10px 0 rgba(173, 201, 176, 0.04), 0 28px 72px rgba(4, 18, 10, 0.28);
}

html[data-theme="dark"] .page-services .ppc-service-panel::before {
    opacity: 0.22;
}

html[data-theme="dark"] .page-services .ppc-service-lead,
html[data-theme="dark"] .page-services .ppc-service-pillars p {
    color: #d0dfcf;
}

html[data-theme="dark"] .page-services .ppc-service-intro,
html[data-theme="dark"] .page-services .ppc-service-pillars li,
html[data-theme="dark"] .page-services .ppc-service-tags {
    border-color: #49634f;
}

html[data-theme="dark"] .page-services .ppc-service-details {
    background: rgba(23, 42, 30, 0.7);
    border-color: #49634f;
    box-shadow: 0 18px 44px rgba(4, 18, 10, 0.2);
}

html[data-theme="dark"] .page-services .ppc-service-pillars strong {
    color: #eff5eb;
}

html[data-theme="dark"] .page-services .ppc-service-pillars li > span {
    color: #deedd6;
    background: #2e4935;
    border-color: #607b65;
}

html[data-theme="dark"] .page-services .ppc-service-tags li {
    color: #deedd6;
    background: #2e4935;
    border-color: #49634f;
}

html[data-theme="dark"] .page-services .ppc-service-image {
    border-color: #49634f;
    box-shadow: 12px 12px 0 rgba(173, 201, 176, 0.06), 0 28px 64px rgba(4, 18, 10, 0.36);
}

html[data-theme="dark"] .page-services .monthly-plan-card,
html[data-theme="dark"] .page-services .monthly-plan-card:nth-child(2),
html[data-theme="dark"] .page-services .monthly-plan-card--featured,
html[data-theme="dark"] .page-services .monthly-plan-card:is(:hover, :focus-within),
html[data-theme="dark"] .page-services .monthly-plan-card:nth-child(2):is(:hover, :focus-within),
html[data-theme="dark"] .page-services .monthly-plan-card--featured:is(:hover, :focus-within) {
    color: #eff5eb;
    background:
        radial-gradient(circle at 92% 5%, rgba(173, 201, 176, 0.13), transparent 28%),
        linear-gradient(155deg, #263f2e, #203628 52%, #1a3022);
    border-color: #49634f;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 56px rgba(4, 18, 10, 0.3);
}

html[data-theme="dark"] .page-services .monthly-plan-card:is(:hover, :focus-within),
html[data-theme="dark"] .page-services .monthly-plan-card--featured:is(:hover, :focus-within) {
    border-color: #adc9b0;
    box-shadow: 0 0 0 5px rgba(173, 201, 176, 0.18), 0 34px 84px rgba(4, 18, 10, 0.42);
}

html[data-theme="dark"] .page-services .monthly-plan-card :is(h3, h4),
html[data-theme="dark"] .page-services .monthly-plan-price span {
    color: #deedd6;
}

html[data-theme="dark"] .page-services :is(.plan-fit, .monthly-plan-summary p, .service-check-list, .monthly-plan-price small),
html[data-theme="dark"] .page-services .monthly-services .service-check-list li {
    color: #d0dfcf;
}

html[data-theme="dark"] .page-services .monthly-plan-summary {
    background: rgba(173, 201, 176, 0.05);
}

html[data-theme="dark"] .page-services .monthly-plan-summary span {
    color: #b9d1b5;
}

html[data-theme="dark"] .page-services .monthly-plan-summary p {
    color: #d0dfcf;
}

html[data-theme="dark"] .page-services .monthly-plan-card:is(:hover, :focus-within) .monthly-plan-summary,
html[data-theme="dark"] .page-services .monthly-plan-card--featured:is(:hover, :focus-within) .monthly-plan-summary {
    background: #2e4935;
    border-left-color: #adc9b0;
}

html[data-theme="dark"] .page-services .monthly-plan-price {
    color: #deedd6;
    background: linear-gradient(135deg, #2e4935, #243d2d);
    border-color: #49634f;
    box-shadow: 0 8px 22px rgba(4, 18, 10, 0.2) inset;
}

html[data-theme="dark"] .page-services .monthly-plan-footer {
    background: linear-gradient(180deg, transparent, #1d3023);
}

/* About */
html[data-theme="dark"][data-about-brand] .page-about .about-identity {
    color: #eff5eb;
    background:
        radial-gradient(circle at 78% 28%, rgba(173, 201, 176, 0.13), transparent 32%),
        linear-gradient(135deg, #14251b, #1d3023 56%, #243d2d);
}

html[data-theme="dark"] .page-about .about-identity::before {
    background:
        linear-gradient(rgba(173, 201, 176, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(173, 201, 176, 0.055) 1px, transparent 1px);
}

html[data-theme="dark"] .page-about .about-identity-copy h1 span:last-child {
    color: #b4d0b1;
}

html[data-theme="dark"] .page-about .about-qualities li {
    color: #d0dfcf;
    background: rgba(46, 73, 53, 0.84);
    border-color: #49634f;
}

html[data-theme="dark"] .page-about .about-team-section {
    background: #14251b;
}

html[data-theme="dark"][data-about-brand] .page-about .about-team-section .team-card {
    --member-soft: #2e4935;
    --member-text: #deedd6;
    background:
        linear-gradient(180deg, rgba(173, 201, 176, 0.06), transparent 44%),
        #203628;
    border-color: #49634f;
    box-shadow: 7px 7px 0 rgba(173, 201, 176, 0.045), var(--shadow-soft);
}

html[data-theme="dark"] .page-about .about-team-section .team-card--zalan,
html[data-theme="dark"] .page-about .about-team-section .team-card--enki {
    --member-soft: #2b493a;
    --member-text: #deedd6;
}

html[data-theme="dark"] .page-about :is(.team-focus, .team-card-name > span, .team-tags li) {
    color: #deedd6;
    background: #2e4935;
    border-color: #49634f;
}

/* Contact */
html[data-theme="dark"] .page-contact .page-hero::before {
    background:
        radial-gradient(circle at 82% 24%, rgba(173, 201, 176, 0.13), transparent 31%),
        linear-gradient(135deg, #14251b, #1d3023 58%, #243d2d);
}

html[data-theme="dark"] .page-contact .page-hero::after {
    background:
        linear-gradient(rgba(173, 201, 176, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(173, 201, 176, 0.055) 1px, transparent 1px);
}

html[data-theme="dark"] .page-contact .page-hero h1 {
    color: #deedd6;
}

html[data-theme="dark"] .page-contact .contact-aside {
    background:
        radial-gradient(circle at 88% 10%, rgba(173, 201, 176, 0.14), transparent 30%),
        linear-gradient(145deg, #274b35, #102d1d 76%);
}

html[data-theme="dark"] .page-contact .contact-form {
    background:
        radial-gradient(circle at 94% 5%, rgba(173, 201, 176, 0.1), transparent 27%),
        linear-gradient(145deg, #203628, #1b3023);
    border-color: #49634f;
    box-shadow: 10px 10px 0 rgba(173, 201, 176, 0.045), var(--shadow);
}

html[data-theme="dark"] .page-contact .field label {
    color: #deedd6;
}

html[data-theme="dark"] .page-contact :is(.field input, .field select, .field textarea) {
    color: #eff5eb;
    background: #243d2d;
    border-color: #49634f;
}

html[data-theme="dark"] .page-contact :is(.field input, .field select, .field textarea):focus {
    color: #eff5eb;
    background: #2e4935;
    border-color: #b4d0b1;
    box-shadow: 0 0 0 4px rgba(173, 201, 176, 0.2);
}

html[data-theme="dark"] .page-contact :is(.field input, .field select, .field textarea)[aria-invalid="true"] {
    background: #422b2b;
}

html[data-theme="dark"] .page-contact .form-footer a {
    color: #b4d0b1;
}

html[data-theme="dark"] .page-contact .form-status.success {
    color: #d9eed6;
    background: #254733;
    border-color: #54745a;
}

/* Shared footer and privacy controls. */
html[data-theme="dark"] .site-footer {
    color: #e8f0e7;
    background: #102d1d;
    border-top-color: rgba(173, 201, 176, 0.25);
}

html[data-theme="dark"] .site-footer a {
    color: #f7faf5;
}

html[data-theme="dark"] .footer-brand {
    width: min(100%, 330px);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html[data-theme="dark"] .footer-brand-logo-wrap {
    display: block;
    width: 100%;
    background: transparent;
}

html[data-theme="dark"] .footer-brand-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(1.72) saturate(0.72) drop-shadow(0 4px 14px rgba(173, 201, 176, 0.2));
}

html[data-theme="dark"] .footer-grid p {
    color: #c9d9c8;
}

html[data-theme="dark"] :is(.footer-links, .footer-contact) > span {
    color: #adc9b0;
}

html[data-theme="dark"] .footer-bottom {
    color: #c9d9c8;
    border-top-color: rgba(173, 201, 176, 0.22);
}

html[data-theme="dark"] :is(.consent-banner, .consent-modal-panel) {
    color: #eff5eb;
    background: #203628;
    border-color: #49634f;
    box-shadow: 0 30px 80px rgba(4, 18, 10, 0.5);
}

html[data-theme="dark"] :is(.consent-banner, .consent-modal-panel) :is(h2, h3) {
    color: #deedd6;
}

html[data-theme="dark"] :is(.consent-banner, .consent-modal-panel) .eyebrow,
html[data-theme="dark"] :is(.consent-banner, .consent-modal-panel) a {
    color: #b4d0b1;
}

@media (max-width: 1120px) {
    html[data-theme="dark"] .brand {
        width: clamp(188px, 34vw, 252px);
    }
}

@media (max-width: 760px) {
    html[data-theme="dark"] .brand {
        width: clamp(170px, 48vw, 222px);
    }
}

/* Every page now uses the supplied wide logo. Give the mobile controls a second row. */
@media (max-width: 580px) {
    :root {
        --nav-height: 116px;
    }

    .site-header {
        min-height: 116px;
    }

    .site-header .nav-shell {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-rows: 56px 52px;
        gap: 0 10px;
        padding-block: 4px;
    }

    .site-header .brand,
    html[data-theme="dark"] .site-header .brand {
        width: min(250px, calc(100% - 58px));
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .site-header .brand-logo {
        width: 100%;
        max-width: 100%;
    }

    .site-header .nav-toggle {
        grid-column: 3;
        grid-row: 1;
    }

    .site-header .language-switch {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .site-header .theme-toggle {
        grid-column: 3;
        grid-row: 2;
    }

    .site-header .primary-nav {
        top: calc(100% + 4px);
    }
}