/*
 * VaHa Digital — editorial design system (handoff "2a").
 *
 * Warm paper, serif display type, clay-red accent, hairline rules instead of
 * cards. No dot background, no glow, no rounded card surfaces, no shadows
 * (the partner badge hover is the single exception).
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* --- Colour ---------------------------------------------------------
       Handoff values, with two AA-driven adjustments (the a11y gate blocks):
       - `--text-muted` #8a8478 measured 3.21:1 / 2.91:1 on --bg-base /
         --bg-soft; darkened to #676156 → 5.30:1 / 4.80:1. The handoff
         explicitly sanctions this darkening.
       - `--accent` #b0502e is kept for display type (≥ 28px = WCAG "large
         text") and non-text marks, where it passes. It measures 4.50:1 on
         --bg-base but only 4.07:1 on --bg-soft, so small accent text and
         accent button fills use `--accent-ink` #a04424 → 5.42:1 / 4.91:1. */
    --bg-base: #f2eee5;
    --bg-soft: #e9e3d6;
    --bg-surface: #f7f4ec;
    --text-primary: #1c1a17;
    --text-secondary: #57534c;
    --text-body: #4a463f;
    --text-muted: #676156;
    --accent: #b0502e;
    --accent-ink: #a04424;
    --border-subtle: #d8d2c4;
    --border-soft-bg: #cfc8b8;
    --border-strong: #cfc8b8;
    --shadow-soft: 0 12px 40px rgba(31, 35, 40, 0.08);

    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-sans: Helvetica, Arial, sans-serif;

    /* Horizontal page gutter — 56px on desktop, tightened on small screens. */
    --gutter: 56px;
    --page-max: 1240px;

    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: 5rem;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.serif {
    font-family: var(--font-serif);
    font-weight: 300;
    letter-spacing: -0.015em;
}

a {
    color: inherit;
}

/* Visible focus ring on every interactive element (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role='button']:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 3px;
}

.btn--dark:focus-visible,
.btn--accent:focus-visible {
    outline-color: var(--text-primary);
}

.content-wrapper {
    max-width: var(--page-max);
    margin: 0 auto;
}

/* Hairline section divider, inset to the page gutter. */
.rule {
    height: 1px;
    margin: 0 var(--gutter);
    background: var(--border-subtle);
}

/* Only the stacked (small-screen) layout needs this divider; on wide screens
   the sections are told apart by their columns. */
.rule--stacked {
    display: none;
}

/* Small uppercase section label ("MITÄ TEEMME", "INFRA", …). */
.section-label {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn--dark {
    background: var(--text-primary);
    color: var(--bg-base);
    padding: 15px 26px;
}

.btn--dark:hover {
    background: var(--accent-ink);
}

.btn--accent {
    background: var(--accent-ink);
    color: var(--bg-base);
    padding: 17px 30px;
}

.btn--accent:hover {
    background: var(--text-primary);
}

/* --- Navigation --------------------------------------------------------- */

.site-nav {
    display: flex;
    align-items: baseline;
    padding: 26px var(--gutter);
}

/* Utility controls (language switcher, and the mobile menu toggle that only
   appears below the breakpoint). */
.site-nav__controls {
    display: flex;
    align-items: baseline;
}

.site-nav__brand {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.nav-links {
    display: flex;
    align-items: baseline;
    gap: 36px;
    margin-left: auto;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-secondary);
}

.nav-links a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

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

/* The contact link is the nav's one accented item — it mirrors the page CTA. */
.nav-links__contact a {
    color: var(--accent-ink);
    border-bottom: 1px solid var(--accent-ink);
}

.nav-links__contact a:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}

/* Tap targets ≥ 24×24px in nav and footer (WCAG 2.5.8) — height comes from
   padding, so the visual type scale is untouched. */
.site-nav a,
.site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* --- Mobile menu ("3b") -------------------------------------------------
   A native disclosure: <summary> is the 44×44px toggle, the panel is the
   <details> body. Hidden above the breakpoint, where .nav-links carries the
   navigation instead. */

.nav-menu {
    display: none;
}

.nav-menu__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    /* Suppress the UA disclosure triangle in every engine. */
    list-style: none;
}

.nav-menu__toggle::-webkit-details-marker {
    display: none;
}

.nav-menu__bars {
    display: grid;
    gap: 5px;
    width: 24px;
}

.nav-menu__bars span {
    display: block;
    height: 1.5px;
    background: var(--text-primary);
}

.nav-menu__cross {
    display: none;
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1;
    color: var(--text-primary);
}

.nav-menu[open] .nav-menu__bars {
    display: none;
}

.nav-menu[open] .nav-menu__cross {
    display: block;
}

/* The open panel fills everything below the header bar. The bar itself is
   80px tall (18px padding + a 44px control + 18px padding). */
.nav-menu__panel {
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 8px var(--gutter) 24px;
    border-top: 1px solid var(--border-subtle);
    overflow-y: auto;
}

.nav-menu__links {
    list-style: none;
}

.nav-menu__links a {
    display: flex;
    align-items: center;
    min-height: 64px;
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-subtle);
}

.nav-menu__links-contact a {
    color: var(--accent-ink);
    border-bottom: 0;
}

.nav-menu__foot {
    display: grid;
    gap: 14px;
    margin-top: auto;
    padding-top: 24px;
}

.nav-menu__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Scroll lock for the page behind the open panel (set by assets/app.js). */
body.has-menu-open {
    overflow: hidden;
}

/* Fi/En switcher: a utility control, set apart by a hairline divider so it
   never reads as another call to action (FR-006/FR-010). */
.language-switcher {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    padding-left: 24px;
    border-left: 1px solid var(--border-subtle);
    font-family: var(--font-sans);
    font-size: 14px;
}

.language-switcher__current {
    color: var(--text-primary);
    font-weight: 600;
    padding: 3px 2px;
}

.language-switcher__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 3px 2px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.language-switcher__link:hover {
    color: var(--accent-ink);
}

/* --- Hero --------------------------------------------------------------- */

.hero {
    padding: 88px var(--gutter) 72px;
    max-width: 940px;
}

.hero h1 {
    font-size: clamp(2.5rem, 5.3vw, 66px);
    line-height: 1.08;
    margin-bottom: 36px;
}

/* Italic clay-red emphasis inside display headings. */
.accent-em {
    font-style: italic;
    font-weight: 300;
    color: var(--accent);
}

.hero__lead {
    font-size: 19px;
    color: var(--text-body);
    max-width: 640px;
    margin-bottom: 40px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.hero__note {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- Services ----------------------------------------------------------- */

.services {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--gutter);
    padding: 64px var(--gutter);
}

/* Abstract geometry under the section label — pure CSS, decorative only. */
.services__mark {
    margin-top: 28px;
}

.services__mark span {
    display: block;
    width: 64px;
}

.services__mark span:first-child {
    height: 64px;
    border-radius: 50%;
    background: var(--accent);
}

.services__mark span:last-child {
    height: 32px;
    margin-top: 10px;
    border-radius: 0 0 64px 64px;
    background: var(--text-primary);
}

.service-list {
    list-style: none;
}

.service-row {
    display: grid;
    /* Handoff spec is 64px | 280px | 1fr; the title column is widened to 320px
       so the real Finnish service titles set on one line, as the artboard shows. */
    grid-template-columns: 64px 320px 1fr;
    gap: 28px;
    align-items: baseline;
    padding: 26px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.service-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.service-row__number {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
}

.service-row__title {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.service-row__body {
    font-size: 15px;
    color: var(--text-secondary);
}

/* --- Collaboration models ----------------------------------------------- */

.models {
    background: var(--bg-soft);
    padding: 72px var(--gutter);
}

.models h2,
.closing h2 {
    font-size: clamp(1.9rem, 3.5vw, 44px);
    line-height: 1.15;
}

.models h2 {
    max-width: 720px;
    margin: 20px 0 48px;
}

.models__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.model:first-child {
    padding-right: 48px;
    border-right: 1px solid var(--border-soft-bg);
}

.model:last-child {
    padding-left: 48px;
}

.model__numeral {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--accent-ink);
    margin-bottom: 14px;
}

.model__title {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.model__body {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.model__meta {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- Infrastructure ----------------------------------------------------- */

.infra {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--gutter);
    align-items: start;
    padding: 72px var(--gutter);
}

.infra h2 {
    font-size: clamp(1.8rem, 3.2vw, 40px);
    line-height: 1.18;
    margin: 20px 0;
}

.infra__body {
    font-size: 16px;
    color: var(--text-body);
    max-width: 560px;
}

.infra__body + .infra__body {
    margin-top: 16px;
}

.infra__aside {
    display: grid;
    gap: 28px;
    padding-left: 40px;
    border-left: 1px solid var(--border-subtle);
}

.infra__aside dt {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.infra__aside dd {
    font-size: 13.5px;
    color: var(--text-muted);
}

/* --- Why Pimcore -------------------------------------------------------- */

.why {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--gutter);
    padding: 64px var(--gutter) 0;
}

.why__content {
    max-width: 720px;
}

.why__statement {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.2vw, 28px);
    line-height: 1.4;
    font-weight: 300;
    margin-bottom: 18px;
}

/* The statement's own emphasis, unlike the other display headings, sets below
   the 24px "large text" threshold on anything narrower than ~1270px (the clamp
   floor is 22.4px), so it takes the small-text accent — #b0502e measures
   4.50:1 on paper, a hair under AA. */
.why__statement .accent-em {
    color: var(--accent-ink);
}

.why__body {
    font-size: 15px;
    color: var(--text-secondary);
}

/* --- Insight (pull quote) ----------------------------------------------- */

.insight {
    padding: 64px var(--gutter);
}

.insight__inner {
    max-width: 820px;
}

.insight blockquote {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.6vw, 32px);
    line-height: 1.35;
    font-weight: 300;
    margin: 24px 0 20px;
}

.insight figcaption {
    font-size: 14px;
    color: var(--text-secondary);
}

/* --- Closing CTA -------------------------------------------------------- */

.closing {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    padding: 24px var(--gutter) 72px;
}

.closing h2 {
    margin-bottom: 16px;
}

.closing__body {
    font-size: 16px;
    color: var(--text-secondary);
}

.closing__actions {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

/* Visible, selectable address beside every mailto CTA (FR-013 fallback).
   Deliberately not a link — it must not compete with the primary CTA. */
.cta-email {
    font-size: 13px;
    color: var(--text-muted);
}

.hero .cta-email {
    margin-top: var(--space-3);
}

.cta-email-address {
    color: var(--text-secondary);
    font-weight: 600;
    user-select: all;
    -webkit-user-select: all;
}

/* Body-copy mailto link (privacy page): tap target ≥ 24px. */
.contact-email {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--accent-ink);
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 32px var(--gutter) 40px;
    font-size: 13px;
    color: var(--text-muted);
}

.site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--accent-ink);
}

.partner-block {
    display: grid;
    gap: var(--space-2);
    justify-items: end;
    max-width: 360px;
    text-align: right;
}

/* Official Pimcore Silver Partner badge as a link. The artwork carries its own
   colour and wordmark, so the link stays unstyled apart from the hover lift —
   the one shadow in the design. */
.partner-badge {
    display: inline-block;
    border-radius: 6px;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-badge img {
    display: block;
    width: 160px;
    height: auto;
    border-radius: 6px;
}

a.partner-badge:hover,
a.partner-badge:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.partner-benefit {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* --- Prose (privacy policy and other text-only pages) ------------------- */

.prose {
    max-width: 760px;
    padding: 64px var(--gutter) 72px;
}

.prose h1 {
    font-size: clamp(2.2rem, 4vw, 52px);
    line-height: 1.1;
    margin-bottom: var(--space-5);
}

.prose h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: var(--space-6) 0 var(--space-2);
}

.prose p,
.prose li {
    font-size: 16px;
    color: var(--text-body);
}

.prose p + p {
    margin-top: var(--space-3);
}

.prose ul {
    padding-left: 1.2rem;
    display: grid;
    gap: var(--space-2);
}

.prose a {
    color: var(--accent-ink);
    overflow-wrap: anywhere;
}

.prose__updated {
    margin-top: var(--space-5);
    font-size: 13px;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* --- Responsive ---------------------------------------------------------
   Two designed ends: 1240px desktop ("2a") and 390px mobile ("3a"/"3b").
   ≤ 900px is the structural break — every two-column grid stacks and the nav
   collapses into the disclosure panel. ≤ 600px switches to the mobile type
   scale and spacing from the handoff table. The 600–900px band deliberately
   keeps the desktop scale on a stacked layout. */

@media (max-width: 900px) {
    /* --- Stacked layout ------------------------------------------------- */

    .services,
    .why {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .infra {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* The label column has no column to sit in any more: the decorative mark
       moves onto the label's own line. */
    .services__head {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .services__mark {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 0;
    }

    .services__mark span {
        flex: none;
        width: 26px;
    }

    .services__mark span:first-child {
        height: 26px;
    }

    .services__mark span:last-child {
        height: 13px;
        margin-top: 0;
        border-radius: 0 0 26px 26px;
    }

    /* Service rows: number + title on one line, description across both. */
    .service-row {
        grid-template-columns: auto 1fr;
        gap: 6px 12px;
        padding: 22px 0;
    }

    .service-row:first-child {
        padding-top: 0;
    }

    .service-row__body {
        grid-column: 1 / -1;
    }

    /* Vertical dividers become horizontal ones when columns stack. */
    .models__grid {
        grid-template-columns: 1fr;
    }

    .model:first-child {
        padding: 0 0 28px;
        border-right: 0;
        border-bottom: 1px solid var(--border-soft-bg);
    }

    .model:last-child {
        padding: 28px 0 0;
    }

    /* The infra sidebar becomes a full-width ruled list. */
    .infra__aside {
        gap: 0;
        padding-left: 0;
        border-top: 1px solid var(--border-subtle);
        border-left: 0;
    }

    .infra__aside > div {
        padding: 18px 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .infra__aside > div:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .closing {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: start;
    }

    .rule--stacked {
        display: block;
    }

    .why {
        padding-bottom: 48px;
    }

    .hero {
        padding-top: 56px;
    }

    /* --- Navigation ("3b") ---------------------------------------------- */

    .site-nav {
        align-items: flex-start;
        padding: 18px var(--gutter);
        border-bottom: 1px solid var(--border-subtle);
    }

    /* Brand and controls share one 44px-tall bar, so the toggle sets the
       height and the wordmark centres against it. */
    .site-nav__brand {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: 15px;
    }

    .site-nav__controls {
        align-items: center;
        gap: 16px;
        min-height: 44px;
        margin-left: auto;
    }

    .nav-links {
        display: none;
    }

    .nav-menu {
        display: block;
    }

    /* Beside the toggle the switcher needs no divider of its own. */
    .language-switcher {
        padding-left: 0;
        border-left: 0;
    }

    /* Opening the panel turns the whole nav into the overlay, which both pins
       the bar to the top of the viewport and gives the panel (absolutely
       positioned) its containing block. Above the cookie notice's z-index. */
    .site-nav:has(.nav-menu[open]) {
        position: fixed;
        inset: 0;
        z-index: 60;
        background: var(--bg-base);
        border-bottom: 0;
    }

    /* --- Footer --------------------------------------------------------- */

    /* One stack: contact details first, then the partner badge, with the fine
       print last. `display: contents` lets the meta line's own items take part
       in that order without a second markup path for small screens. */
    .site-footer {
        display: grid;
        justify-items: start;
        gap: 6px;
        padding: 28px var(--gutter) 32px;
    }

    .site-footer__meta {
        display: contents;
    }

    .site-footer__meta > [aria-hidden='true'] {
        display: none;
    }

    .site-footer a {
        color: var(--text-primary);
    }

    .partner-block {
        justify-items: start;
        max-width: none;
        margin-top: 14px;
        text-align: left;
    }

    .site-footer__copyright {
        order: 1;
        margin-top: 14px;
    }
}

@media (max-width: 600px) {
    :root {
        --gutter: 24px;
    }

    /* --- Type scale (handoff mobile column) ----------------------------- */

    .section-label {
        font-size: 12px;
    }

    .hero h1 {
        font-size: 38px;
        line-height: 1.1;
        margin-bottom: 22px;
    }

    .hero__lead {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .models h2,
    .closing h2 {
        font-size: 32px;
    }

    .infra h2 {
        font-size: 30px;
        margin: 14px 0 16px;
    }

    .why__statement,
    .insight blockquote {
        font-size: 23px;
        line-height: 1.4;
    }

    .service-row__number,
    .model__numeral {
        font-size: 14px;
    }

    .service-row__title {
        font-size: 21px;
    }

    .model__title {
        font-size: 22px;
    }

    .model__meta {
        font-size: 12.5px;
    }

    .infra__body,
    .closing__body {
        font-size: 15px;
    }

    .infra__aside dd {
        font-size: 13px;
    }

    .insight figcaption {
        font-size: 13px;
    }

    /* --- Spacing -------------------------------------------------------- */

    .hero {
        padding: 44px var(--gutter) 40px;
    }

    .services {
        padding: 40px var(--gutter);
        gap: 26px;
    }

    .models,
    .infra,
    .why,
    .insight {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .models h2 {
        margin: 14px 0 32px;
    }

    .closing {
        padding: 12px var(--gutter) 48px;
    }

    /* --- Full-width actions --------------------------------------------- */

    .btn {
        width: 100%;
        min-height: 48px;
        padding: 16px 22px;
    }

    /* The hero CTA owns the full width, so its note and address fallback
       centre under it rather than sitting alongside. */
    .hero__actions {
        display: grid;
        gap: 12px;
        text-align: center;
    }

    .hero .cta-email {
        margin-top: 0;
        text-align: center;
    }

    .closing__actions {
        justify-items: stretch;
    }

    .partner-badge img {
        width: 150px;
    }
}