/* ==========================================================================
   Visual refresh — one design system across the site
   Loaded last on every page. Unifies buttons, cards, photos, typography and
   adds the new section layouts (process, comparison, statements, closing
   CTA, footer). Template files stay untouched.
   ========================================================================== */

:root {
    /* Brighter, slightly blue-tinted body text for long reading on navy */
    --paragraphColorSecond: #c3cddb;

    --mb-radius-card: 20px;
    --mb-radius-img: 20px;
    --mb-card-bg: linear-gradient(160deg, rgba(67, 165, 254, 0.08) 0%, rgba(13, 17, 42, 0.75) 40%, rgba(7, 9, 30, 0.9) 100%);
    --mb-card-border: rgba(255, 255, 255, 0.1);
    --mb-card-border-hover: rgba(67, 165, 254, 0.55);
    --mb-measure: 65ch;
}

/* ==========================================================================
   Typography (item 11 + 12)
   ========================================================================== */

body { font-size: 17px; }

.about-content p,
.team-content p,
.contact-content p,
.section-title-2 p,
.mb-statements__intro p,
.mb-closing p {
    font-size: 18px !important;
    line-height: 1.75;
    color: var(--paragraphColorSecond);
}

.features-section-2 .feature-box p,
.service-card p { font-size: 16.5px; line-height: 1.7; }

/* Comfortable line length everywhere text runs long */
.about-content p,
.team-content p,
.contact-content p,
.mb-closing p { max-width: var(--mb-measure); }

.section-title-2 p {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.about-content { padding-left: 0; }
@media (min-width: 992px) { .about-content { padding-left: 40px; } }

/* ==========================================================================
   Buttons (item 1) — one pill-shaped style, same as the header CTA
   ========================================================================== */

.default-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 50px;
    padding: 13px 26px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background-image: none !important;
    border-radius: 999px;
    box-shadow: 0 10px 28px -14px rgba(67, 165, 254, 0.8);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Replace the template's "icon slides in on hover" with a static arrow */
.default-btn i {
    position: static;
    font-size: 20px;
    transition: transform 0.2s ease;
}
.default-btn:hover i { left: auto; transform: translateX(3px); }
.default-btn:hover span { margin-right: 0; }

.default-btn.btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: none;
}

.modern-form .default-btn { border-radius: 999px; }

/* ==========================================================================
   Cards (item 1) — template feature boxes match the service cards
   ========================================================================== */

.features-section-2 .feature-box,
.contact-info-box {
    padding: 36px 32px;
    background: var(--mb-card-bg);
    border: 1px solid var(--mb-card-border);
    border-radius: var(--mb-radius-card);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
/* Drop the template's spinning-gradient hover border */
.features-section-2 .feature-box:hover::before,
.features-section-2 .feature-box:hover::after { display: none; }

.features-section-2 .feature-box:hover,
.contact-info-box:hover {
    border-color: var(--mb-card-border-hover);
    transform: translateY(-3px);
    box-shadow: 0 26px 50px -30px rgba(67, 165, 254, 0.45);
}

/* Icon tile, same as the service cards */
.features-section-2 .feature-box .icon,
.contact-info-box > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
    font-size: 28px;
    line-height: 1;
    color: var(--mainColor2);
    background: rgba(67, 165, 254, 0.12);
    border: 1px solid rgba(67, 165, 254, 0.3);
    border-radius: 14px;
}

.features-section-2 .feature-box h3 { font-size: 22px; line-height: 1.25; margin-bottom: 12px; }

/* Inline-style highlighted card on markkinointivastaava (pull quote box) */
.mb-quote-box {
    padding: 40px;
    background: var(--mb-card-bg);
    border: 1px solid var(--mb-card-border-hover);
    border-radius: var(--mb-radius-card);
}

/* Form panel + dropdown */
.modern-form { border-radius: var(--mb-radius-card); }
.modern-form .nice-select { width: 100%; }

/* ==========================================================================
   Photos (item 2) — one navy-blue monochrome treatment
   ========================================================================== */

.img-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--mb-radius-img);
    isolation: isolate;
}
.img-box img.image-box-item,
.mb-photo img {
    border-radius: var(--mb-radius-img);
    filter: saturate(0.6) contrast(1.05) brightness(0.9) !important;
}
.img-box::after,
.mb-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(160deg, rgba(67, 165, 254, 0.18) 0%, rgba(20, 50, 120, 0.2) 55%, rgba(5, 5, 30, 0.3) 100%);
    mix-blend-mode: color;
}
.img-box::before,
.mb-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, transparent 55%, rgba(5, 5, 30, 0.45) 100%);
}
.mb-photo { position: relative; overflow: hidden; border-radius: var(--mb-radius-img); isolation: isolate; }

/* Sub-page hero photos: same treatment through the existing overlay */
.section-banner > div[style*="position: absolute"] {
    -webkit-backdrop-filter: saturate(0.5) contrast(1.05);
    backdrop-filter: saturate(0.5) contrast(1.05);
    background:
        linear-gradient(180deg, rgba(5, 5, 30, 0) 62%, rgba(5, 5, 30, 0.95) 100%),
        linear-gradient(90deg, rgba(5, 5, 30, 0.93) 0%, rgba(5, 5, 30, 0.74) 45%, rgba(8, 12, 36, 0.5) 100%) !important;
}

/* ==========================================================================
   Back-to-top (item 1 + 15) — round, quiet, only after scrolling
   ========================================================================== */

.go-top {
    width: 44px;
    height: 44px;
    right: 20px;
    bottom: 20px;
    color: #fff;
    background: rgba(13, 17, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.go-top:hover {
    background: var(--mainColor2);
    border-color: var(--mainColor2);
}
.go-top i { font-size: 22px; }
@media (max-width: 575px) {
    .go-top { width: 40px; height: 40px; right: 14px; bottom: 14px; }
}

/* ==========================================================================
   Hero facts (item 4)
   ========================================================================== */

.mb-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 36px;
    margin: 40px 0 0;
    padding: 24px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 600px;
}
.mb-facts li { display: flex; flex-direction: column; gap: 2px; }
.mb-facts strong {
    font-family: var(--headingFont);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}
.mb-facts span { font-size: 14.5px; color: var(--paragraphColorSecond); }

/* ==========================================================================
   Challenges as statements (item 6)
   ========================================================================== */

.mb-statements { padding: 100px 0; }
.mb-statements__grid { display: grid; gap: 40px; }
@media (min-width: 992px) {
    .mb-statements__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
    .mb-statements__intro { position: sticky; top: 120px; }
}
.mb-statements__intro h2 { color: #fff; margin-bottom: 20px; }
.mb-statements__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mb-statements__list li {
    position: relative;
    padding: 22px 0 22px 44px;
    font-family: var(--headingFont);
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mb-statements__list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 18px;
    height: 2px;
    background: var(--mainColor2);
}

/* ==========================================================================
   Comparison: three ways (item 6)
   ========================================================================== */

.mb-compare { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 992px) { .mb-compare { grid-template-columns: 1fr 1fr 1.15fr; gap: 24px; align-items: center; } }

.mb-compare__item {
    height: 100%;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--mb-radius-card);
    background: rgba(255, 255, 255, 0.015);
}
.mb-compare__item h3 { font-size: 21px; color: rgba(255, 255, 255, 0.85); margin: 14px 0 10px; }
.mb-compare__item p { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(195, 205, 219, 0.8); }
.mb-compare__icon { font-size: 26px; color: rgba(255, 255, 255, 0.55); }

.mb-compare__item--ours {
    position: relative;
    padding: 44px 36px;
    background: var(--mb-card-bg);
    border: 1px solid var(--mainColor2);
    box-shadow: 0 30px 70px -35px rgba(67, 165, 254, 0.6);
}
.mb-compare__item--ours h3 { color: #fff; font-size: 24px; }
.mb-compare__item--ours p { color: var(--paragraphColorSecond); }
.mb-compare__item--ours .mb-compare__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 26px;
    color: var(--mainColor2);
    background: rgba(67, 165, 254, 0.12);
    border: 1px solid rgba(67, 165, 254, 0.3);
    border-radius: 14px;
}
@media (min-width: 992px) { .mb-compare__item:not(.mb-compare__item--ours) { height: auto; } }

@media (max-width: 575px) {
    .mb-compare__item { padding: 22px 20px; }
    .mb-compare__item--ours { padding: 28px 22px; }
    .mb-compare__item h3 { margin-top: 8px; }
}

/* ==========================================================================
   Numbered process (item 6 + 10)
   ========================================================================== */

.mb-process {
    position: relative;
    display: grid;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mbstep;
}
@media (min-width: 768px) { .mb-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
    .mb-process--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mb-process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* connecting line through the step numbers */
    .mb-process::before {
        content: "";
        position: absolute;
        top: 27px;
        left: 28px;
        right: 28px;
        height: 1px;
        background: linear-gradient(90deg, var(--mainColor2), rgba(67, 165, 254, 0.15));
    }
}
.mb-process > li { position: relative; counter-increment: mbstep; }
.mb-process__num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    font-family: var(--headingFont);
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    background: #0b1230;
    border: 1px solid var(--mainColor2);
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--DarkBg), 0 0 30px -6px rgba(67, 165, 254, 0.7);
}
.mb-process h3 { font-size: 22px; color: #fff; margin-bottom: 10px; }
.mb-process p { font-size: 16.5px; line-height: 1.7; color: var(--paragraphColorSecond); margin: 0; }

.mb-process--cards > li {
    padding: 32px;
    background: var(--mb-card-bg);
    border: 1px solid var(--mb-card-border);
    border-radius: var(--mb-radius-card);
}
.mb-process--cards::before { top: 59px; left: 60px; right: 60px; }
.mb-process--cards ul { margin: 0; padding: 0; list-style: none; }
.mb-process--cards ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--paragraphColorSecond);
}
.mb-process--cards ul li::before {
    content: "\ea0f"; /* bx-check */
    font-family: "boxicons";
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 20px;
    color: var(--mainColor2);
}

.mb-note {
    max-width: var(--mb-measure);
    margin: 40px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

/* Highlighted result card (konsultointi) */
.mb-result {
    padding: 40px;
    background: var(--mb-card-bg);
    border: 1px solid var(--mainColor2);
    border-radius: var(--mb-radius-card);
    box-shadow: 0 30px 70px -40px rgba(67, 165, 254, 0.6);
}
.mb-result h2 { color: #fff; margin-bottom: 20px; }
.mb-result ul { margin: 0 0 20px; padding: 0; list-style: none; }
.mb-result ul li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.55;
    color: #fff;
}
.mb-result ul li::before {
    content: "\ea0f";
    font-family: "boxicons";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    color: var(--mainColor2);
}
.mb-result p { margin: 0; color: var(--paragraphColorSecond); font-size: 16.5px; }

/* ==========================================================================
   Quote request section layout (item 12: no long centred paragraphs)
   ========================================================================== */

.mb-quote { display: grid; gap: 40px; align-items: start; }
@media (min-width: 992px) { .mb-quote { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.mb-quote__intro h2 { color: #fff; margin-bottom: 20px; }
.mb-quote__intro p { font-size: 18px; line-height: 1.75; color: var(--paragraphColorSecond); max-width: 52ch; }
.mb-quote__intro .mb-quote__small { margin-top: 18px; font-size: 15px; opacity: 0.8; }

/* ==========================================================================
   Closing CTA on sub-pages (item 16)
   ========================================================================== */

.mb-closing { padding: 40px 0 110px; }
.mb-closing__card {
    position: relative;
    display: grid;
    gap: 32px;
    padding: clamp(32px, 5vw, 64px);
    overflow: hidden;
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(67, 165, 254, 0.22), transparent 70%),
        linear-gradient(160deg, #0d1638 0%, #08102a 100%);
    border: 1px solid rgba(67, 165, 254, 0.35);
    border-radius: 24px;
}
@media (min-width: 992px) { .mb-closing__card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 56px; } }
.mb-closing h2 { color: #fff; margin-bottom: 16px; }
.mb-closing__contact { display: grid; gap: 14px; }
.mb-closing__line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mb-closing__line:hover { color: #fff; border-color: var(--mainColor2); background: rgba(67, 165, 254, 0.08); }
.mb-closing__line i { font-size: 22px; color: var(--mainColor2); flex-shrink: 0; }
.mb-closing__contact .default-btn { width: 100%; margin-top: 6px; }

/* ==========================================================================
   Footer (item 5)
   ========================================================================== */

.mb-footer {
    padding: 72px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 16px;
    color: var(--paragraphColorSecond);
}
.mb-footer__grid { display: grid; gap: 40px; padding-bottom: 56px; }
@media (min-width: 768px) { .mb-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .mb-footer__grid { grid-template-columns: 1.6fr 1fr 1.3fr; gap: 64px; } }
.mb-footer__brand img { height: 36px; width: auto; }
.mb-footer__brand p { max-width: 36ch; margin: 20px 0 0; line-height: 1.7; }
.mb-footer h3 { margin-bottom: 18px; font-size: 16px !important; font-weight: 700; color: #fff; }
.mb-footer ul { margin: 0; padding: 0; list-style: none; }
.mb-footer li + li { margin-top: 10px; }
.mb-footer a { color: var(--paragraphColorSecond); text-decoration: none; transition: color 0.2s ease; }
.mb-footer a:hover { color: #fff; }
.mb-footer__contact a { display: inline-flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.mb-footer__contact i { font-size: 19px; color: var(--mainColor2); }
.mb-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 22px 0 28px;
    font-size: 14.5px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mb-footer__base ul { display: flex; gap: 24px; }
.mb-footer__base li + li { margin-top: 0; }

/* ==========================================================================
   Mobile (item 15)
   ========================================================================== */

@media (max-width: 767px) {
    /* hero buttons: full-size touch targets */
    .hero-content-2 .short-prompt ul { flex-wrap: wrap; }
    .hero-content-2 .short-prompt ul li a.default-btn {
        min-height: 48px;
        padding: 12px 22px;
        font-size: 16px !important;
    }
    .mb-facts { gap: 14px 26px; }
    .mb-facts strong { font-size: 22px; }
    .features-section-2 .feature-box { padding: 26px 22px; }
    .mb-process--cards > li { padding: 26px 22px; }
    .mb-result { padding: 28px 22px; }
    .mb-statements { padding: 70px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .default-btn, .default-btn i,
    .features-section-2 .feature-box,
    .contact-info-box { transition: none; }
    .features-section-2 .feature-box:hover,
    .contact-info-box:hover { transform: none; }
}

/* Samuli's role line (replaces the template label above his name) */
.mb-role {
    margin: 0 0 8px;
    font-size: 16px !important;
    font-weight: 600;
    color: var(--mainColor2) !important;
}

/* Hero facts: always three columns side by side from small tablets up */
@media (min-width: 576px) {
    .mb-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 32px; max-width: none; }
    .mb-facts strong { font-size: 24px; }
}

/* The template styles the hero buttons separately; keep them pill-shaped too */
.hero-content-2 .short-prompt ul li a.default-btn { border-radius: 999px; }


/* ==========================================================================
   Sub-page hero parallax
   main.js moves the hero photo into .mb-parallax, which drifts at a quarter
   of the scroll speed. Without JS (or with reduced motion) the photo stays
   as the section's own static background.
   ========================================================================== */

.section-banner.has-parallax {
    overflow: hidden;
    background-image: none !important;
}
.mb-parallax {
    position: absolute;
    left: 0;
    right: 0;
    top: -25%;
    height: 125%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    pointer-events: none;
}

/* ==========================================================================
   Forms: spam trap, validation and send status (assets/js/forms.js)
   ========================================================================== */

.mb-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.modern-form .help-block { min-height: 0; margin-top: 6px; font-size: 14.5px; color: #ff9b94; }
.modern-form .help-block:empty { display: none; }
.modern-form .has-error .form-control,
.modern-form .has-error .nice-select { border-color: #ff6b61 !important; }

.mb-form-status { margin-top: 18px; font-size: 16px; font-weight: 500; line-height: 1.5; text-align: left; }
.mb-form-status:empty { display: none; }
.mb-form-status:focus { outline: none; }
.mb-form-status.is-success,
.mb-form-status.is-error { padding: 14px 18px; border-radius: 12px; }
.mb-form-status.is-success { color: #8be6bd; background: rgba(60, 203, 143, 0.12); border: 1px solid rgba(60, 203, 143, 0.35); }
.mb-form-status.is-error { color: #ffb3ad; background: rgba(255, 107, 97, 0.12); border: 1px solid rgba(255, 107, 97, 0.35); }
.default-btn[disabled] { opacity: 0.65; cursor: progress; }