/* V5.5.8 mobile review. Load after the shared release bundle.
   A single gutter, content-sized cards and stable controls at compact widths.
   The approved globe, automatic platform selection and workflow logic stay intact. */

/* Preferences remain reachable in the footer on every viewport. */
[data-sbi-global-footer] .sbi-footer-cookie-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 44px;
    max-width: 100%;
    margin: 0;
    padding: .5rem .75rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    background: transparent;
    color: #a49bac;
    font: 600 .75rem/1.4 var(--sbi-global-font-body, sans-serif);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: .2em;
    white-space: normal;
    cursor: pointer;
    touch-action: manipulation;
}
[data-sbi-global-footer] .sbi-footer-cookie-settings:is(:hover, :focus-visible) {
    color: #e9d7fc;
    border-color: rgba(197,156,255,.3);
    background: rgba(197,156,255,.06);
}
[data-sbi-global-footer] .sbi-footer-cookie-settings:focus-visible {
    outline: 2px solid #d8bdff;
    outline-offset: 3px;
}
.sbi-service-main :is(.sbi-service-layout, .sbi-service-catalog) > * { min-width: 0; }
.sbi-service-main :is(h1, h2, h3, .sbi-service-phone, .sbi-service-proof a) {
    max-width: 100%;
    overflow-wrap: break-word;
}

@media (max-width: 1023px) {
    [data-sbi-v53-root] {
        /* Symmetric safe gutters also protect either landscape notch edge. */
        --sbi-v557-gutter: max(1rem, 3vw, env(safe-area-inset-left), env(safe-area-inset-right));
    }
    [data-sbi-v53-root] :is(.sbi-hero, #about) { padding-inline: var(--sbi-v557-gutter); }
    .sbi-service-main {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    .sbi-service-breadcrumb { align-items: center; }
    .sbi-service-breadcrumb a { min-height: 44px; }
    /* .sbi-v54-section used 16px padding as well as a shell inset of 16px.
       The shell now supplies the only horizontal gutter, like services/work. */
    [data-sbi-v53-root] .sbi-v54-section { padding-inline: 0; }
    [data-sbi-v53-root] .sbi-v54-shell {
        width: calc(100% - var(--sbi-v557-gutter) - var(--sbi-v557-gutter));
    }
    [data-sbi-v53-root] .sbi-visual-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding-inline: 0;
    }
    [data-sbi-v53-root] .sbi-visual-side {
        width: 100%;
        max-width: 42rem;
        justify-self: start;
    }
    [data-sbi-v53-root] .sbi-visual-side .sbi-v54-copy { margin-top: 0; }
    [data-sbi-v53-root] .sbi-faq-shell { gap: 1.5rem; }

    /* Equal CTA baselines are useful for desktop rows, but a stacked card
       must not inherit a 17/19rem text reserve or another card's row height. */
    [data-sbi-v53-root] #selected-work .sbi-selected-work-grid {
        grid-auto-rows: auto;
        align-items: start;
    }
    [data-sbi-v53-root] #selected-work .sbi-selected-work-item { display: block; }
    [data-sbi-v53-root] #selected-work .sbi-work-card { height: auto; }
    [data-sbi-v53-root] #selected-work .sbi-work-card-layout {
        flex: none;
        min-height: 0;
        align-items: start;
    }
    [data-sbi-v53-root] #selected-work .sbi-work-card-content {
        height: auto;
        min-height: 0;
    }
    [data-sbi-v53-root] #selected-work .sbi-work-card-action {
        margin-top: 0 !important;
        padding-top: 1rem;
    }
    [data-sbi-v53-root] #selected-work .sbi-work-card-action a {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.4;
    }

    [data-sbi-global-footer] .sbi-global-footer-inner {
        align-items: center;
        text-align: center;
    }
    [data-sbi-global-footer] .sbi-global-footer-inner > * {
        min-width: 0;
        max-width: 100%;
    }
    [data-sbi-global-footer] .sbi-global-socials {
        justify-content: center;
        align-self: center;
    }
}

/* A tablet has room to put the preview beside the copy, avoiding four
   oversized portrait cards while leaving the wide desktop composition alone. */
@media (min-width: 768px) and (max-width: 1023px) {
    [data-sbi-v53-root] #selected-work .sbi-work-card-layout {
        grid-template-columns: minmax(0, 1fr) minmax(12rem, .8fr);
        align-items: center;
        column-gap: 1.5rem;
    }
}

@media (max-width: 767px) {
    [data-sbi-v53-root] :is(.sbi-rhythm-section, .sbi-v54-section) {
        padding-block: 2.25rem !important;
    }
    [data-sbi-v53-root] #about.sbi-rhythm-section { padding-top: 1.5rem !important; }
    [data-sbi-v53-root] .sbi-trusted-section {
        padding-top: 0 !important;
        padding-bottom: 1.5rem !important;
    }
    [data-sbi-v53-root] #impact.sbi-rhythm-section { padding-top: 2rem !important; }
    [data-sbi-v53-root] :is(.sbi-v54-copy, .sbi-service-body > p, .sbi-contact-copy) {
        line-height: 1.65 !important;
    }
    [data-sbi-v53-root] .sbi-team-side { margin-top: 1rem; }
    [data-sbi-v53-root] .sbi-team-heading { margin-bottom: 1.25rem; }
    [data-sbi-v53-root] .sbi-team-note { line-height: 1.5; }
    [data-sbi-v53-root] .sbi-workflow-navigation { gap: .5rem; }
    [data-sbi-v53-root] .sbi-workflow .sbi-workflow-nav-button {
        white-space: normal;
        min-height: 44px;
        font-size: .75rem;
    }

    [data-sbi-v53-root] #work { --sbi-reel-width: min(72vw, 15rem); }
    [data-sbi-v53-root] #work .sbi-reels-header { gap: 1rem; }
    [data-sbi-v53-root] #work .sbi-reels-header p { line-height: 1.65; }
    [data-sbi-v53-root] #work .sbi-reels-controls {
        gap: .65rem;
        margin-top: 1rem;
        justify-content: center;
    }
    [data-sbi-v53-root] #work .sbi-reels-controls > button {
        justify-content: center;
        min-height: 44px;
        max-width: 100%;
        padding-inline: 1rem;
        font-size: .72rem;
        letter-spacing: .07em;
        white-space: normal;
        line-height: 1.4;
    }
    [data-sbi-v53-root] #work .sbi-reels-navigation {
        flex-shrink: 0;
        max-width: 100%;
    }
    [data-sbi-v53-root] #work .sbi-reels-navigation [data-reel-counter] {
        min-width: 3.75rem;
        letter-spacing: .1em;
    }
    [data-sbi-v53-root] #work .sbi-reel-track { padding-block: 1.5rem; }
    [data-sbi-v53-root] #work .sbi-reel-client-region { min-height: 0; }
    [data-sbi-v53-root] #work .sbi-reel-client-link {
        min-height: 48px;
        padding: .7rem 1rem;
        font-size: .88rem;
        text-wrap: balance;
    }
    [data-sbi-v53-root] .sbi-visual-stage { margin-top: .75rem; padding-block: 1rem 1.25rem; }
    [data-sbi-v53-root] .sbi-visual-card {
        width: min(78vw, 20rem);
        height: min(62vw, 16rem);
    }

    [data-sbi-v53-root] #selected-work .sbi-selected-work-intro { gap: 1rem; }
    [data-sbi-v53-root] #selected-work .sbi-selected-work-intro > p { line-height: 1.65; }
    [data-sbi-v53-root] #selected-work .sbi-work-card-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
    [data-sbi-v53-root] #selected-work .sbi-work-card-copy { margin-top: .35rem !important; }
    [data-sbi-v53-root] #selected-work .sbi-work-card-copy > p:last-child { line-height: 1.65; }
    [data-sbi-v53-root] #selected-work .sbi-work-card-preview {
        width: min(100%, 17rem);
        max-width: 17rem;
        min-width: 0;
        justify-self: center;
    }
    [data-sbi-v53-root] #services .sbi-service-card { min-height: 0; }
    [data-sbi-v53-root] #services .sbi-service-heading {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        align-items: center;
    }
    [data-sbi-v53-root] #services .sbi-service-title { padding-top: 0; }
    [data-sbi-v53-root] #services .sbi-service-body > p { margin-top: 1rem !important; }
    [data-sbi-v53-root] .sbi-faq-item summary { padding: .95rem 1rem; }
    [data-sbi-v53-root] .sbi-faq-item > p { padding-inline: 1rem; line-height: 1.65; }

    [data-sbi-global-footer].sbi-global-footer {
        padding: 1rem max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
    }
    [data-sbi-global-footer] .sbi-global-footer-inner {
        gap: .7rem;
        padding-bottom: max(.75rem, env(safe-area-inset-bottom));
    }
    [data-sbi-global-footer] .sbi-global-footer-inner > p:first-child { text-wrap: balance; }
    [data-sbi-global-footer] .sbi-footer-capabilities {
        display: grid;
        width: min(100%, 25rem);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: .75rem;
        row-gap: .35rem;
        font-size: .8rem;
        line-height: 1.4;
    }
    [data-sbi-global-footer] .sbi-footer-capabilities > span {
        min-width: 0;
        text-wrap: balance;
        overflow-wrap: break-word;
    }
}

@media (max-width: 374px) {
    /* Keep both sets of controls usable with Greek copy or enlarged text. */
    [data-sbi-v53-root] #work .sbi-reels-controls { flex-direction: column; }
    [data-sbi-v53-root] #work .sbi-reels-controls > button { width: 100%; }
    [data-sbi-global-footer] .sbi-footer-capabilities { grid-template-columns: minmax(0, 1fr); }
}