/* Samlade mobiljusteringar. Filen laddas sist för att enbart påverka små skärmar. */

@media (max-width: 760px) {
    html {
        width: 100%;
        max-width: 100%;
        scroll-padding-top: 108px;
        overflow-x: clip;
    }

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        text-align: center;
    }

    main,
    section {
        width: 100%;
        max-width: 100%;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }

    .header-stage {
        position: relative;
        z-index: 900;
        height: 100px;
    }

    .site-header,
    .site-header.is-scrolled {
        position: fixed;
        z-index: 900;
        top: 0;
        left: 8px;
        display: flex;
        width: calc(100% - 16px);
        min-height: 96px;
        flex-wrap: wrap;
        gap: 0 10px;
        padding: 2px 12px 1px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 18px;
        background: rgba(7,16,26,.94);
        box-shadow: 0 14px 36px rgba(7,16,26,.18), 0 0 28px rgba(114,230,208,.03);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        transform: none;
        translate: none;
        transition: none;
    }

    main section[id] {
        scroll-margin-top: 108px;
    }

    .logo-svg,
    .site-header.is-scrolled .logo-svg {
        width: 62px;
        height: 48px;
    }

    .logo-text,
    .site-header.is-scrolled .logo-text {
        gap: 4px;
        margin-left: -14px;
    }

    .logo-title,
    .site-header.is-scrolled .logo-title {
        font-size: 1.2rem;
    }

    .logo-subtitle,
    .site-header.is-scrolled .logo-subtitle {
        gap: 4px;
        font-size: .38rem;
        letter-spacing: .12em;
    }

    .logo-subtitle .dot {
        width: 4px;
        height: 4px;
    }

    .header-right {
        gap: 6px;
        margin-left: auto;
    }

    .language-switch,
    .site-header.is-scrolled .language-switch {
        display: flex;
        flex: 0 0 auto;
        gap: 4px;
    }

    .language-button,
    .site-header.is-scrolled .language-button {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: .66rem;
        touch-action: manipulation;
    }

    .language-button:active,
    .language-button:focus-visible,
    .language-button.active {
        border-color: #72e6d0;
        background: rgba(114, 230, 208, .1);
    }

    .cta-button,
    .site-header.is-scrolled .cta-button {
        min-width: 0;
        min-height: 42px;
        gap: 6px;
        padding: 0 10px;
        border-radius: 11px;
        font-size: .7rem;
        white-space: nowrap;
    }

    .cta-arrow {
        font-size: .95rem;
    }

    .main-navigation,
    html[lang="en"] .main-navigation {
        order: 3;
        width: 100%;
        flex: 0 0 100%;
        justify-content: flex-start;
        gap: 20px;
        margin: 0;
        padding: 0 3px;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .main-navigation::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        flex: 0 0 auto;
        padding: 8px 0 12px;
        font-size: .78rem;
    }

    .nav-link::after {
        bottom: 2px;
        width: 5px;
        height: 5px;
    }

    .hero {
        padding-top: 36px;
        opacity: 1;
        translate: 0 0;
        will-change: auto;
    }

    .hero-content,
    .hero-description {
        max-width: 100%;
        margin-inline: auto;
    }

    .hero-eyebrow,
    .hero-buttons,
    .hero-trust {
        justify-content: center;
    }

    .hero-buttons,
    .hero-button,
    .cta-button[href="#contact"],
    .contact-leyo-prompt button {
        position: relative;
        z-index: 4;
        pointer-events: auto;
        touch-action: manipulation;
    }

    .hero-title {
        font-size: clamp(2.45rem, 12vw, 3.7rem);
        overflow-wrap: anywhere;
    }

    .hero-button-secondary::after {
        left: calc(50% - 12px);
        transform: translateX(-50%);
    }

    .dashboard-wrapper,
    .dashboard,
    .contact-shell,
    .service-card,
    .about-highlight {
        min-width: 0;
        max-width: 100%;
    }

    .dashboard-heading {
        align-items: center;
        flex-direction: column;
        gap: 12px;
    }

    .dashboard-header {
        justify-content: center;
    }

    .dashboard-stat-top,
    .dashboard-panel-header,
    .dashboard-insight-header {
        justify-content: center;
        gap: 8px;
    }

    .services-header,
    .about-header,
    .process-header,
    .contact-copy {
        margin-inline: auto;
    }

    .service-card-top {
        justify-content: center;
    }

    .service-card h4,
    .service-card > p,
    .about-copy,
    .about-highlight,
    .contact-copy h2,
    .contact-copy > p {
        margin-inline: auto;
    }

    .about-highlight {
        padding-bottom: 26px;
        padding-inline: 20px;
        border-left: 0;
        border-top: 2px solid #72d8c5;
    }

    .process-steps {
        padding-left: 0;
    }

    .process-steps::before {
        display: none;
    }

    .process-card {
        padding-top: 50px;
    }

    .process-number {
        left: 50%;
        transform: translateX(-50%);
    }

    .process-icon {
        margin-inline: auto;
    }

    .case-card {
        min-height: 0;
        transform: translateY(24px);
    }

    .case-card.is-visible {
        transform: translateY(0);
    }

    .case-before {
        transform: translateY(24px);
    }

    .case-before.is-visible {
        transform: translateY(0);
    }

    .case-copy {
        padding-inline: 20px;
    }

    .case-results li {
        align-items: center;
        flex-direction: column;
        gap: 12px;
    }

    .case-showcase {
        width: 100%;
        min-height: 470px;
    }

    .case-preview-hint,
    .case-preview-hint-after {
        margin-bottom: 28px;
    }

    .case-preview-hint-before {
        display: none;
    }

    .case-before-scroll,
    .case-laptop-screen,
    .case-phone,
    .case-site {
        pointer-events: auto;
        touch-action: pan-y;
    }

    .case-before-scroll {
        position: relative;
        z-index: 8;
        height: min(280px, 68vw);
        overflow-x: hidden;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: none;
        overscroll-behavior-y: auto;
    }

    .case-before-scroll img {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        object-position: top center;
        pointer-events: none;
        -webkit-user-drag: none;
        user-select: none;
    }

    .case-laptop-screen,
    .case-phone {
        isolation: isolate;
        overscroll-behavior-x: none;
        overscroll-behavior-y: auto;
    }

    .case-laptop-screen {
        height: min(300px, 72vw);
        aspect-ratio: auto;
    }

    .case-site {
        z-index: 2;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: none;
        overscroll-behavior-y: auto;
    }

    .case-phone-speaker {
        pointer-events: none;
    }

    .case-laptop {
        width: 94%;
    }

    .case-phone {
        right: 1%;
    }

    .values-strip article {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .value-icon {
        width: 48px;
        height: 48px;
        margin-inline: auto;
    }

    .contact-shell {
        padding-inline: 20px;
    }

    .contact-submit {
        justify-content: center;
        margin-inline: auto;
    }

    .contact-field {
        min-width: 0;
    }

    .contact-form {
        position: relative;
        z-index: 6;
        pointer-events: auto;
    }

    .contact-field,
    .contact-field input,
    .contact-field textarea,
    .contact-select-wrap,
    .contact-select-display,
    .contact-select-option {
        position: relative;
        pointer-events: auto;
        touch-action: manipulation;
    }

    .contact-field input,
    .contact-field textarea {
        -webkit-user-select: text;
        user-select: text;
        font-size: 16px;
        text-align: left;
    }

    .contact-field input:focus,
    .contact-field textarea:focus {
        z-index: 2;
    }

    .leyo-chat,
    .leyo-panel {
        pointer-events: none;
    }

    .leyo-trigger,
    .leyo-chat.is-open .leyo-panel {
        pointer-events: auto;
    }

    input,
    textarea,
    select,
    button {
        max-width: 100%;
    }

    .case-section::before,
    .dashboard-wrapper::after {
        max-width: 100vw;
    }
}

@media (max-width: 760px) and (hover: none),
       (max-width: 760px) and (pointer: coarse) {
    .nav-link:active,
    .nav-link:focus-visible,
    .hero-button-secondary:active,
    .hero-button-secondary:focus-visible {
        color: #6848f2;
    }

    .nav-link:active::after,
    .nav-link:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    .hero-button-primary:active,
    .hero-button-primary:focus-visible,
    .cta-button:active,
    .cta-button:focus-visible {
        box-shadow: 0 14px 30px rgba(63, 204, 175, .25);
    }

    .service-card:active,
    .process-card:active,
    .dashboard-stat-card:active,
    .dashboard-panel:active,
    .dashboard-insight:active,
    .values-strip article:active {
        transform: translateY(0) scale(.992);
        transition-duration: .12s;
    }

    .contact-leyo-prompt button:active,
    .contact-leyo-prompt button:focus-visible,
    .leyo-contact-link:active,
    .leyo-contact-link:focus-visible {
        color: #5135c3;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .leyo-close:active,
    .leyo-close:focus-visible {
        background: rgba(255,255,255,.07);
        color: #fff;
    }
}

@media (max-width: 760px) {
    .service-card.mobile-reveal-ready,
    .process-card.mobile-reveal-ready {
        transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1), border-color .7s ease-out, box-shadow .85s cubic-bezier(.16,1,.3,1), background .7s ease-out;
    }

    .process-card.mobile-reveal-ready {
        transition: opacity .9s cubic-bezier(.25,.1,.25,1), transform .9s cubic-bezier(.25,.1,.25,1), border-color .7s ease-out, box-shadow .85s ease, background .7s ease-out;
    }

    .service-card.mobile-reveal-ready:not(.is-visible),
    .process-card.mobile-reveal-ready:not(.is-visible) {
        opacity: 0;
        transform: translateY(50px) scale(.97);
        box-shadow: 0 6px 16px rgba(44,50,72,.035), 0 10px 24px rgba(103,76,211,.025), 0 0 0 rgba(114,230,208,0);
    }

    .service-card.is-visible.is-mobile-active,
    .process-card.is-visible.is-mobile-active,
    .about-section.is-visible .about-highlight.is-mobile-active {
        opacity: 1;
        transform: translateY(-5px);
        border-color: rgba(112, 214, 194, .62);
        background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(244,241,255,.92));
        box-shadow: 0 16px 30px rgba(44,50,72,.1), 0 30px 58px rgba(103,76,211,.16), 0 0 24px rgba(114,230,208,.13);
    }

    .dashboard-stat-card.is-mobile-active,
    .dashboard-panel.is-mobile-active,
    .dashboard-insight.is-mobile-active {
        z-index: 3;
        transform: translateY(-5px);
        border-color: rgba(114,230,208,.48);
        background: linear-gradient(145deg, rgba(114,230,208,.11), rgba(123,92,255,.07));
        box-shadow: 0 18px 34px rgba(0,0,0,.24), 0 0 27px rgba(114,230,208,.11);
    }

    .case-showcase.is-mobile-active .case-laptop {
        filter: drop-shadow(0 34px 34px rgba(15,18,21,.3));
    }

    .case-showcase.is-mobile-active .case-phone {
        box-shadow: 0 25px 44px rgba(0,0,0,.34), 0 0 22px rgba(123,92,255,.13), inset 0 0 0 1px #777;
    }

    .case-before.is-mobile-active,
    .case-card.is-visible.is-mobile-active,
    .contact-shell.is-mobile-active {
        border-color: rgba(123,92,255,.36);
        box-shadow: 0 18px 38px rgba(41,45,63,.1), 0 34px 66px rgba(82,68,145,.13), 0 0 22px rgba(114,230,208,.08);
    }

    .values-strip article {
        transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
    }

    .values-strip article.is-mobile-active {
        transform: translateY(-4px);
        background: linear-gradient(145deg, rgba(114,230,208,.09), rgba(123,92,255,.055));
        box-shadow: 0 15px 30px rgba(82,68,145,.12), 0 0 18px rgba(114,230,208,.08);
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
    .service-card,
    .process-card,
    .about-highlight,
    .dashboard-stat-card,
    .dashboard-panel,
    .dashboard-insight,
    .case-before,
    .case-card,
    .values-strip article,
    .contact-shell {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 680px) {
    .case-phone {
        height: 285px;
    }
}

@media (max-width: 480px) {
    html {
        scroll-padding-top: 102px;
    }

    .header-stage {
        height: 94px;
    }

    .site-header,
    .site-header.is-scrolled {
        min-height: 90px;
        gap: 0 7px;
        padding: 1px 9px 0;
    }

    main section[id] {
        scroll-margin-top: 102px;
    }

    .logo-svg,
    .site-header.is-scrolled .logo-svg {
        width: 54px;
        height: 43px;
    }

    .logo-title,
    .site-header.is-scrolled .logo-title {
        font-size: 1.05rem;
    }

    .cta-button,
    .site-header.is-scrolled .cta-button {
        min-height: 40px;
        padding-inline: 8px;
        font-size: .64rem;
    }

    .language-button,
    .site-header.is-scrolled .language-button {
        width: 28px;
        height: 28px;
        font-size: .62rem;
    }

    .main-navigation,
    html[lang="en"] .main-navigation {
        gap: 17px;
        padding-inline: 2px;
    }

    .nav-link {
        font-size: .72rem;
    }

    .hero {
        width: calc(100% - 28px);
        padding-top: 28px;
    }

    .hero-title {
        font-size: clamp(2.25rem, 12vw, 3rem);
        line-height: 1.02;
    }

    .hero-description {
        font-size: .94rem;
        line-height: 1.65;
    }

    .hero-dashboard-placeholder {
        min-height: 300px;
    }

    .dashboard {
        padding: 12px;
        border-radius: 20px;
    }

    .dashboard-stats {
        gap: 8px;
    }

    .dashboard-stat-card,
    .dashboard-panel,
    .dashboard-insight {
        padding: 12px;
    }

    .services-container,
    .about-container,
    .process-container {
        width: calc(100% - 28px);
    }

    .service-card,
    .process-card {
        padding-inline: 18px;
    }

    .case-card,
    .case-before,
    .values-strip {
        width: calc(100% - 24px);
    }

    .case-card {
        min-height: 930px;
        border-radius: 24px;
    }

    .case-copy {
        padding-inline: 18px;
    }

    .case-showcase {
        min-height: 470px;
    }

    .contact-section {
        padding-inline: 12px;
    }

    .contact-shell {
        gap: 36px;
        padding: 28px 16px;
    }

    .leyo-chat {
        right: 24px;
    }

    .leyo-panel {
        width: calc(100vw - 48px);
    }
}

@media (max-width: 390px) {
    .logo-subtitle {
        display: none;
    }

    .cta-button,
    .site-header.is-scrolled .cta-button {
        padding-inline: 7px;
        font-size: .6rem;
    }

    .header-right {
        gap: 4px;
    }

    .language-switch,
    .site-header.is-scrolled .language-switch {
        gap: 3px;
    }

    .language-button,
    .site-header.is-scrolled .language-button {
        width: 26px;
        height: 26px;
        font-size: .58rem;
    }

    .cta-arrow {
        display: none;
    }

    .hero-title {
        font-size: 2.15rem;
    }

    .case-card {
        min-height: 880px;
    }

    .case-showcase {
        min-height: 430px;
    }

    .case-phone {
        width: 104px;
        height: 238px;
    }
}

@media (max-width: 340px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
}

/* Mobile copy alignment: keep editing fields and technical controls readable. */
@media (max-width: 760px) {
    :is(.hero, .dashboard, .services-section, .expertise-section, .about-section,
        .process-section, .case-section, .contact-section, .site-footer, .privacy-main)
        :is(h1, h2, h3, h4, h5, h6, p, figcaption),
    .service-row,
    .service-meta,
    .service-index,
    .case-results li,
    .contact-field label,
    .intake-progress li,
    .contact-direct,
    .leyo-header,
    .leyo-message-bot {
        text-align: center;
    }

    :is(.hero, .services-section, .about-section, .process-section, .case-section,
        .contact-section, .privacy-main) :is(h1, h2, h3, h4, h5, h6) {
        text-wrap: balance;
        overflow-wrap: anywhere;
    }

    .service-copy { grid-template-columns: minmax(0, 1fr); }
    .service-copy > .service-meta { grid-column: 1; grid-row: 1; }
    .service-meta { flex-direction: column; justify-content: center; gap: 12px; }
    .service-copy > .service-art {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        margin: 0 auto 20px;
    }
    .service-copy > :is(h4, p) { margin-inline: auto; }
    .expertise-card { flex-direction: column; justify-content: center; }

    .hero-buttons,
    .hero-trust,
    .intake-actions,
    .footer-direct { justify-content: center; }
    .intake-actions .cta-button { flex: 0 1 auto; white-space: normal; }
    .intake-actions > button { justify-content: center; }
    .intake-progress li { min-width: 0; overflow-wrap: anywhere; }
    .intake-success-mark,
    .leyo-contact-link,
    .privacy-main :is(h1, p) { margin-inline: auto; }
    .contact-copy .contact-bubble { margin-inline: auto; translate: none; }

    .leyo-header { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; }
    .leyo-message-bot { margin-inline: auto; overflow-wrap: anywhere; }
    .leyo-message-user,
    .intake-choice,
    .intake-choice > span,
    .contact-select-display,
    .contact-select-option,
    input,
    textarea,
    select,
    [contenteditable="true"] { text-align: left; }

    .site-footer .site-footer-inner,
    .site-footer .footer-direct { align-items: center; }
    .site-footer .footer-direct a { align-self: center; }
    .site-footer-inner > p { width: 100%; }
}