/* ==========================================================================
   Sunstar — responsive
   Check ports: wide 1920+ / 1536+, desktop 1366 / 1280,
   tab landscape <= 1200, tab portrait <= 992, mobile <= 580
   ========================================================================== */

/* ---------- Wide screens (1920 and above) ---------- */
@media (min-width: 1920px) {
    :root {
        --ss-container-max: 1680px;
    }
    .ss-hero-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 54px;
        line-height: 68px;
    }
    .ss-hero-text > :not(h1, h2, h3, h4, h5, h6) {
        max-width: 600px;
    }
    .ss-hero-text p {
        font-size: 21px;
        line-height: 35px;
    }
    .ss-tech-card {
        max-width: 1600px;
    }
    .ss-why-card p {
        max-width: none;
    }
}

/* ---------- Desktop 1366 ---------- */
@media (max-width: 1511px) {
    :root {
        --ss-gutter: 80px;
        --ss-header-h: 120px;
    }
    .ss-logo {
        width: 190px;
    }
    .ss-nav {
        margin-left: 50px;
    }
    .ss-nav-list {
        gap: 34px;
    }
    .ss-burger {
        margin-left: 34px;
    }
    .ss-hero-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 44px;
        line-height: 57px;
    }
    .ss-hero-btns {
        margin-top: 46px;
    }
    .ss-help {
        margin-right: 0;
    }

    .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 46px;
        line-height: 60px;
    }
    .ss-title--sm > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 35px;
        line-height: 49px;
    }
    .ss-title--xl > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 49px;
        line-height: 61px;
    }
    .ss-why-title > * {
        font-size: 37px;
        line-height: 52px;
    }
    .ss-why-card {
        padding: 32px 24px 28px 26px;
    }
    .ss-why-card-head h3 {
        font-size: 23px;
        line-height: 32px;
    }
    .ss-tech-card {
        margin: 0 32px;
        padding: 50px 42px;
        min-height: 0;
    }
    .ss-tech-grid {
        column-gap: 48px;
    }
    .ss-tech-copy {
        padding-top: 70px;
    }
    .ss-tech-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 46px;
        line-height: 59px;
    }
    .ss-tech-text p {
        font-size: 19px;
        line-height: 32px;
    }
    .ss-play-label {
        font-size: 23px;
        line-height: 30px;
    }
    .ss-ind-body h3 {
        font-size: 27px;
        line-height: 36px;
    }
    .ss-title--people > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 46px;
        line-height: 54px;
    }
    .ss-contact-copy {
        padding-left: 0;
    }
    .ss-contact-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 66px;
        line-height: 74px;
    }
    /* narrower so every line stays on the orange star (its slanted edge comes closer as the gutter shrinks) */
    .ss-contact-text > :not(h1, h2, h3, h4, h5, h6) {
        max-width: 450px;
    }
    .ss-contact-text p {
        font-size: 22px;
        line-height: 36px;
    }
    .ss-contact-list a {
        font-size: 29px;
    }
    .ss-form-card {
        padding: 48px 46px 50px;
    }
    .ss-btn--submit {
        width: 100%;
    }
    .ss-f-logo {
        padding-left: 0;
    }
    .ss-f-logo img {
        width: 260px;
    }
}

/* ---------- Desktop 1280 ---------- */
@media (max-width: 1365px) {
    :root {
        --ss-gutter: 60px;
    }
    .ss-header-inner {
        padding: 0 34px 0 26px;
    }
    .ss-logo {
        width: 175px;
    }
    .ss-nav {
        margin-left: 34px;
    }
    .ss-nav-list {
        gap: 25px;
    }
    .ss-nav-list a {
        font-size: 15px;
    }
    .ss-btn-contact {
        width: 128px;
        height: 45px;
        font-size: 15px;
    }
    .ss-burger {
        margin-left: 22px;
    }
    .ss-hero-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 42px;
        line-height: 55px;
    }
    .ss-hero-text p {
        font-size: 18px;
        line-height: 30px;
    }
    .ss-help {
        width: 460px;
    }
    .ss-help-card {
        height: 130px;
        padding-top: 21px;
    }
    .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 44px;
        line-height: 57px;
    }
    .ss-partner-text p,
    .ss-model-text p {
        font-size: 17px;
        line-height: 29px;
    }
    .ss-why-grid {
        gap: 22px 16px;
    }
    /* room for "Structured from Mobilisation / to Improvement" on two lines */
    .ss-model-row--rev .ss-model-copy {
        width: 44%;
    }
    /* keep the small / large title variants in step with the base title size above */
    .ss-title--sm > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 34px;
        line-height: 47px;
    }
    .ss-title--xl > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 47px;
        line-height: 59px;
    }
    .ss-why-card-head img {
        max-height: 46px;
    }
    .ss-why-card p {
        font-size: 15px;
        line-height: 25px;
    }
    .ss-tech-copy {
        padding-top: 50px;
    }
    .ss-tech-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 42px;
        line-height: 54px;
    }
    .ss-tech-text p {
        font-size: 18px;
        line-height: 30px;
    }
    .ss-tech-copy .ss-btn {
        margin-top: 40px;
    }
    .ss-ind-intro p {
        font-size: 18px;
        line-height: 31px;
    }
    .ss-contact-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 60px;
        line-height: 68px;
    }
    .ss-contact-list a {
        font-size: 26px;
    }
    .ss-btn--xl {
        gap: 24px;
        padding: 0 22px;
        font-size: 19px;
    }
}

/* ---------- Tab landscape (1200 and below) ---------- */
@media (max-width: 1200px) {
    :root {
        --ss-gutter: 40px;
        --ss-header-h: 104px;
        --ss-header-h-fixed: 80px;
    }
    /* main links move into the burger menu */
    .ss-nav {
        display: none;
    }
    .ss-hero-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 40px;
        line-height: 52px;
        max-width: 665px;
    }
    .ss-hero-text > :not(h1, h2, h3, h4, h5, h6) {
        max-width: 500px;
    }
    .ss-hero-dots .slick-dots {
        margin-left: 0;
    }
    .ss-help {
        width: 430px;
        padding: 14px 18px 18px;
    }
    .ss-help-head {
        padding-right: 12px;
    }
    .ss-help-list {
        gap: 8px;
        margin-left: 0;
    }
    .ss-help-card {
        height: 124px;
        padding: 18px 4px 10px;
    }
    .ss-help-icon {
        height: 40px;
    }
    .ss-help-icon img {
        max-height: 40px;
    }
    .ss-help-label {
        font-size: 13px;
        line-height: 17px;
    }

    .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 40px;
        line-height: 52px;
    }
    .ss-title--sm > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 32px;
        line-height: 44px;
    }
    .ss-title--xl > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 44px;
        line-height: 56px;
    }
    /* the picture column gets more room, so frame + person scale up together
       (they must keep the Figma proportions: the cut-out lines up with the photo) */
    .ss-partner-grid {
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
        column-gap: 24px;
    }
    /* picture pushed right to the window edge, leaving a clear gap after the text */
    .ss-partner-visual {
        justify-self: end;
        width: 100%;
        margin: -80px calc(-1 * var(--ss-gutter)) 0 0;
    }
    /* the title keeps its two Figma lines; line 1 clears the picture, which starts lower */
    .ss-partner-copy {
        position: relative;
        z-index: 1;
    }
    .ss-partner-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        width: 12.57em;
        max-width: none;
    }
    .ss-why {
        padding: 90px 0;
    }
    .ss-why-title > * {
        font-size: 34px;
        line-height: 48px;
    }
    .ss-why-grid {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 46px;
    }
    .ss-why-card {
        min-height: 0;
    }
    .ss-model {
        padding: 90px 0 100px;
    }
    .ss-model-row + .ss-model-row {
        margin-top: 80px;
    }
    .ss-model-row--rev .ss-model-copy,
    .ss-model-copy {
        width: 42%;
        margin-left: 5%;
    }
    .ss-tech-card {
        margin: 0 24px;
        padding: 40px 36px;
    }
    /* the video runs the full height of the text column */
    .ss-tech-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        align-items: stretch;
    }
    .ss-tech-video {
        aspect-ratio: auto;
        min-height: 420px;
    }
    .ss-tech-copy {
        padding-top: 20px;
    }
    .ss-tech-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 38px;
        line-height: 49px;
    }
    .ss-tech-copy .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
        margin-top: 30px;
    }
    .ss-tech-text p {
        font-size: 17px;
        line-height: 29px;
    }
    .ss-play-btn {
        transform: scale(.82);
        transform-origin: left top;
    }
    .ss-play-label {
        right: 37%;
        width: 140px;
        font-size: 20px;
        line-height: 26px;
    }
    .ss-play-line {
        display: none;
    }
    .ss-ind-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 30px;
        margin-right: 0;
    }
    .ss-ind-body h3 {
        font-size: 24px;
        line-height: 32px;
    }
    .ss-ind-item {
        padding-bottom: 44px;
    }
    .ss-ind-dot {
        margin-top: 2px;
    }
    .ss-title--people > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 42px;
        line-height: 50px;
    }
    .ss-people {
        min-height: 0;
    }
    .ss-people-card {
        padding: 48px 44px 54px;
    }
    .ss-people-text p {
        font-size: 18px;
        line-height: 31px;
    }
    /* same split as desktop (the star is placed from the form edge); minmax(0) so the
       form card can't push its column past the container */
    .ss-contact-grid {
        grid-template-columns: minmax(0, 616fr) minmax(0, 664fr);
        column-gap: 0;
    }
    .ss-contact-copy {
        padding-right: 24px;
    }
    .ss-contact-copy {
        /* padding-top: 40px; */
        padding-top: 110px;
    }
    .ss-contact-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 52px;
        line-height: 60px;
    }
    .ss-contact-text > :not(h1, h2, h3, h4, h5, h6) {
        max-width: 340px; /* keeps every line on the orange star */
    }
    .ss-contact-text p {
        font-size: 20px;
        line-height: 33px;
    }
    .ss-contact-list {
        margin-left: 0;
    }
    .ss-contact-list a {
        font-size: 24px;
    }
    .ss-btn--xl {
        height: 58px;
        font-size: 17px;
    }
    .ss-form-card {
        min-height: 0;
        padding: 40px 32px;
    }
    .ss-form-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 32px;
        line-height: 44px;
    }
    .ss-footer-grid {
        grid-template-columns: 190fr 300fr 200fr 250fr;
        column-gap: 32px;
    }
    .ss-f-logo img {
        width: 170px;
    }
    .ss-menu-logo {
        width: 225px;
    }
    .ss-menu-list {
    margin-top: 35px;
}
.ss-menu-list > li > a {
    font: 700 20px/48px var(--ss-font);
}
.ss-menu-bottom {
    padding-top: 25px;
}
.ss-hero-content {
    margin-top: 20px;
}
.ss-model-row--rev .ss-model-copy{
    margin-left: 3%;
}
.ss-partner {
    padding-top: 30px;
}
.ss-tech {
    padding-bottom: 40px;
}

}

/* ---------- Tab portrait (992 and below) ---------- */
@media (max-width: 992px) {
    :root {
        --ss-gutter: 30px;
        --ss-header-h: 96px;
        --ss-header-h-fixed: 74px;
    }
    .ss-header-inner {
        padding: 0 24px;
    }
    .ss-logo {
        width: 165px;
    }
    .ss-header.scrolled .ss-logo {
        width: 140px;
    }
    .ss-burger {
        margin: 0 -10px 0 18px;
    }

    /* Hero: the curve closes the slides (only its corners show on load) and the
       help block follows below on the white page */
    .ss-hero {
        height: auto;
        padding-bottom: 10px;
        background: #fff;
    }
    /* slides grow with their text; all slides take the tallest one's height */
    .ss-hero-main,
    .ss-hero-slider,
    .ss-hero-slider .slick-list {
        height: auto;
    }
    .ss-hero-slider .slick-track {
        display: flex;
        height: auto;
    }
    .ss-hero-slider .slick-slide {
        height: auto;
    }
    /* the slides fill the screen; the help block follows below them */
    .ss-hero {
        min-height: 0;
    }
    .ss-hero-slide {
        height: auto;
        min-height: calc(100vh + var(--ss-curve-below));
        min-height: calc(100svh + var(--ss-curve-below));
    }
    .ss-hero-content {
        padding: 40px 0 calc(110px + var(--ss-curve-h));
    }
    .ss-hero-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 38px;
        line-height: 50px;
    }
    .ss-hero-dots {
        bottom: calc(46px + var(--ss-curve-h));
    }
    .ss-help-wrap {
        position: relative;
        bottom: auto;
        margin-top: 10px;
    }
    .ss-help {
        width: 100%;
        padding: 18px 22px 22px;
        background: #1f1d2f;
    }
    .ss-help-card {
        height: 130px;
    }
    .ss-help-label {
        font-size: 14px;
    }
    .ss-hero-curve {
        bottom: -2px;
    }

    .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 36px;
        line-height: 47px;
    }
    .ss-title--sm > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 30px;
        line-height: 41px;
    }
    .ss-title--xl > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 40px;
        line-height: 51px;
    }

    .ss-partner {
        padding-top: 40px;
    }
    .ss-partner-grid {
        grid-template-columns: 1fr;
    }
    .ss-partner-copy .ss-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-partner-copy .ss-btn,
    .ss-partner-text > :not(h1, h2, h3, h4, h5, h6) {
        margin-left: 0;
    }
    .ss-partner-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        width: auto;
        max-width: 12.57em;
    }
    .ss-partner-text > :not(h1, h2, h3, h4, h5, h6) {
        max-width: none;
    }
    .ss-partner-visual {
        justify-self: center;
        width: 100%;
        max-width: 560px;
        margin: 10px auto 0;
    }

    .ss-why {
        padding: 80px 0;
    }
    .ss-why-title > * {
        font-size: 31px;
        line-height: 44px;
    }
    .ss-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ss-why-card p {
        max-width: none;
    }

    .ss-model {
        /* padding: 80px 0; */
        padding: 80px 0 58px;
    }
    .ss-model-row,
    .ss-model-row--rev {
        flex-direction: column;
        align-items: stretch;
    }
    .ss-model-row + .ss-model-row {
        /* margin-top: 64px; */
        margin-top: 45px;
    }
    .ss-model-img,
    .ss-model-row--rev .ss-model-img {
        width: 100%;
        margin: 0;
    }
    .ss-model-row--rev .ss-model-copy,
    .ss-model-copy {
        width: 100%;
        margin: 30px 0 0;
    }
    .ss-model-copy .ss-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-model-row--rev .ss-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-model-row--rev .ss-model-text > :not(h1, h2, h3, h4, h5, h6) {
        max-width: none;
    }
    .ss-model-row--rev .ss-model-text > :not(h1, h2, h3, h4, h5, h6) {
        padding-left: 0;
    }

    .ss-tech {
        /* padding-bottom: 70px; */
        padding-bottom: 45px;
        background: linear-gradient(#fff 0 80px, var(--ss-bg) 80px);
    }
    .ss-tech-card {
        margin: 0 20px;
        padding: 30px;
    }
    .ss-tech-grid {
        grid-template-columns: 1fr;
    }
    .ss-tech-video {
        aspect-ratio: 16 / 12;
        min-height: 0;
    }
    .ss-play-btn {
        transform: scale(.8);
    }
    .ss-play-line {
        display: block;
        width: 80px;
    }
    .ss-tech-copy {
        padding: 40px 6px 10px;
    }
    .ss-tech-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        max-width: none;
    }
    .ss-tech-text > :not(h1, h2, h3, h4, h5, h6) {
        max-width: none;
    }

    /* Industries: one column; the image opens under the active point */
    .ss-ind {
        /* padding: 30px 0 90px; */
        padding: 30px 0 50px;
    }
    .ss-ind-grid {
        grid-template-columns: 1fr;
    }
    .ss-ind-media {
        display: none;
    }
    .ss-ind-intro > :not(h1, h2, h3, h4, h5, h6) {
        max-width: none;
    }
    .ss-ind-mob-img {
        display: block;
        max-width: 520px;
        margin: 16px 0 6px;
        overflow: hidden;
        border-radius: 16px;
        aspect-ratio: 4 / 3;
    }
    .ss-ind-mob-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ss-ind-body {
        flex: 1;
        min-width: 0;
    }

    .ss-people {
        padding: 70px 0;
    }
    .ss-people-bg img {
        object-position: 70% center;
    }
    .ss-people-card {
        width: 100%;
        max-width: 572px;
    }

    /* Contact: the orange shape gives way to a full orange band */
    .ss-shape-clip {
        display: none;
    }
    .ss-contact {
        padding: 80px 0;
        background: linear-gradient(160deg, #f2752e 0%, #ef4136 70%);
    }
    .ss-contact-grid {
        grid-template-columns: 1fr;
    }
    .ss-contact-copy {
        padding: 0 0 50px;
    }
    .ss-contact-text > :not(h1, h2, h3, h4, h5, h6) {
        max-width: 620px;
    }
    .ss-form-card {
        width: 100%;
        max-width: none;
    }
    .ss-btn--submit {
        width: 100%;
    }

    .ss-footer {
        padding-top: 64px;
    }
    /* rows: logo (centred) / Head Office, About us, Services / copyright (centred) */
    .ss-footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 44px 56px;
    }
    .ss-f-logo {
        grid-column: 1 / -1;
        justify-self: center;
    }
    .ss-f-logo img {
        width: 180px;
    }
    .ss-f-services {
        grid-column: auto;
        grid-row: auto;
    }
    /* full-width row: copyright on one line, the EWD credit below it */
    .ss-f-copy-br {
        display: none;
    }
    .ss-f-copy {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: center;
        margin: 0;
        padding: 0;
        text-align: center;
    }
}

/* ---------- Mobile (580 and below) ---------- */
@media (max-width: 580px) {
    :root {
        --ss-gutter: 20px;
        --ss-header-h: 76px;
        --ss-header-h-fixed: 66px;
    }
    .ss-header-inner {
        padding: 0 16px 0 14px;
    }
    .ss-logo,
    .ss-header.scrolled .ss-logo {
        width: 128px;
    }
    .ss-btn-contact {
        width: 104px;
        height: 38px;
        font-size: 14px;
    }
    .ss-burger {
        margin-left: 8px;
    }

    .ss-hero-content {
        padding: 30px 0 calc(90px + var(--ss-curve-h));
    }
    .ss-hero-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 29px;
        line-height: 39px;
    }
    .ss-hero-text > :not(h1, h2, h3, h4, h5, h6) {
        margin-top: 20px;
    }
    .ss-hero-text p {
        font-size: 16px;
        line-height: 27px;
    }
    .ss-hero-btns {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 30px;
    }
    .ss-hero-btns .ss-btn {
        height: 48px;
        font-size: 15px;
    }
    .ss-hero-dots {
        bottom: calc(36px + var(--ss-curve-h));
    }
    .ss-hero-dots .slick-dots {
        gap: 20px;
    }
    .ss-help-wrap {
        margin-top: 24px;
    }
    .ss-help {
        padding: 12px 14px 16px;
    }
    .ss-help-head p {
        font-size: 16px;
    }
    .ss-help-list {
        gap: 7px;
    }
    .ss-help-card {
        height: 116px;
        padding-top: 16px;
    }
    .ss-help-label {
        font-size: 12.5px;
        line-height: 16px;
    }

    .ss-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-title--people > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 30px;
        line-height: 40px;
    }
    .ss-title--sm > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 26px;
        line-height: 36px;
    }
    .ss-title--xl > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 33px;
        line-height: 43px;
    }
    .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
        width: 120px;
    }
    .ss-partner-copy .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
        margin-top: 20px;
    }
    .ss-partner-text > :not(h1, h2, h3, h4, h5, h6) {
        margin-top: 22px;
    }
    .ss-partner-text p,
    .ss-model-text p,
    .ss-tech-text p,
    .ss-people-text p,
    .ss-ind-intro p {
        font-size: 16px;
        line-height: 27px;
    }
    .ss-partner-copy .ss-btn {
        margin-top: 30px;
    }
    .ss-btn--md,
    .ss-btn--lg {
        height: 50px;
        font-size: 16px;
    }

    .ss-why {
        padding: 64px 0;
    }
    .ss-why-title > * {
        font-size: 26px;
        line-height: 36px;
    }
    .ss-why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 34px;
    }
    .ss-why-card {
        padding: 26px 22px 26px;
    }
    .ss-why-card-head {
        min-height: 0;
    }
    .ss-why-card-head h3 {
        font-size: 22px;
        line-height: 30px;
    }
    .ss-why-card p {
        margin-top: 14px;
    }

    .ss-model {
        /* padding: 64px 0; */
        padding: 64px 0 50px;
    }
    .ss-model-row + .ss-model-row {
        /* margin-top: 48px; */
        margin-top: 40px;
    }
    .ss-model-row--rev .ss-model-copy,
    .ss-model-copy {
        /* margin-top: 24px; */
        margin-top: 32px;
    }

    .ss-tech-card {
        margin: 0 12px;
        padding: 16px;
        border-radius: 12px;
    }
    .ss-tech-video {
        aspect-ratio: 1 / 1;
    }
    .ss-play-btn {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(.62);
        transform-origin: center;
    }
    .ss-play-label {
        right: auto;
        left: 0;
        top: auto;
        bottom: 18px;
        width: 100%;
        font-size: 17px;
        line-height: 22px;
        text-align: center;
    }
    .ss-play-line {
        display: none;
    }
    .ss-tech-copy {
        padding: 30px 4px 10px;
    }
    .ss-tech-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 30px;
        line-height: 40px;
    }
    .ss-tech-copy .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
        margin-top: 22px;
    }
    .ss-tech-text > :not(h1, h2, h3, h4, h5, h6) {
        margin-top: 20px;
    }
    .ss-tech-copy .ss-btn {
        margin-top: 30px;
    }

    .ss-ind {
        /* padding: 10px 0 70px; */
        padding: 10px 0 40px;
    }
    .ss-ind-intro > :not(h1, h2, h3, h4, h5, h6) {
        margin-top: 20px;
    }
    .ss-ind-list-wrap {
        margin-top: 34px;
    }
    .ss-ind-item {
        padding-bottom: 30px;
    }
    .ss-contact-title > :is(h1, h2, h3, h4, h5, h6), .ss-contact-text > :not(h1, h2, h3, h4, h5, h6) {
        max-width: 100%;
    }
    .ss-ind-dot {
        margin: 0;
        transform-origin: left center;
    }
    .ss-ind-track {
        left: 16px;
    }
    .ss-ind-body {
        margin-left: 12px;
    }
    .ss-ind-body h3 {
        font-size: 20px;
        line-height: 30px;
    }
    .ss-ind-desc p {
        font-size: 15px;
        line-height: 24px;
    }

    .ss-people {
        padding: 260px 0 0;
    }
    .ss-people-bg {
        bottom: auto;
        height: 300px;
    }
    .ss-people-card {
        margin: 0 calc(-1 * var(--ss-gutter));
        width: auto;
        max-width: none;
        padding: 36px 24px 44px;
        border-radius: 0;
        background: rgb(37,31,78);
    }
    .ss-people-card .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
        margin-top: 24px;
    }

    .ss-contact {
        padding: 64px 0;
    }
    .ss-contact-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 40px;
        line-height: 48px;
    }
    .ss-contact-text > :not(h1, h2, h3, h4, h5, h6) {
        margin-top: 20px;
    }
    .ss-contact-text p {
        font-size: 18px;
        line-height: 30px;
    }
    .ss-contact-list {
        margin-top: 32px;
    }
    .ss-contact-list img {
        width: 28px;
    }
    .ss-contact-list li + li img {
        width: 26px;
    }
    .ss-contact-list a,
    .ss-contact-list li + li a {
        margin-left: 14px;
        font-size: 21px;
    }
    .ss-contact-copy .ss-btn {
        margin-top: 36px;
    }
    .ss-btn--xl {
        width: 100%;
        height: auto;
        min-height: 56px;
        padding: 12px 18px;
        justify-content: center;
        gap: 14px;
        font-size: 16px;
        white-space: normal;
    }
    .ss-form-card {
        padding: 30px 20px;
        border-radius: 16px;
    }
    .ss-form-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 27px;
        line-height: 36px;
    }
    .ss-form-intro p {
        font-size: 15px;
        line-height: 25px;
    }
    .ss-cf-input {
        height: 58px;
        padding: 19px 16px 0;
        font-size: 17px;
    }
    select.ss-cf-input {
        background-position: right 18px center;
    }
    .ss-cf-label {
        left: 17px;
        top: 19px;
        font-size: 16px;
    }
    .ss-cf-field + .ss-cf-field,
    .ss-cf-field:first-of-type + .ss-cf-field {
        margin-top: 14px;
    }
    .ss-cf-note {
        margin-top: 22px;
        font-size: 14px;
        line-height: 22px;
    }
    .ss-btn--submit {
        height: 58px;
        font-size: 20px;
    }

    .ss-footer {
        /* padding: 54px 0 30px; */
        padding: 54px 0 50px;
    }
    .ss-footer-grid {
        grid-template-columns: 1fr;
        row-gap: 34px;
    }
    .ss-f-logo img {
        width: 180px;
    }
    .ss-f-links {
        margin-top: 8px;
    }
    .ss-f-links a {
        line-height: 36px;
    }

    .ss-menu-panel {
        width: 100%;
        padding: 22px 60px 34px 34px;
    }
    .ss-menu-logo {
        width: 210px;
    }
    .ss-menu-close {
        top: 18px;
        right: -40px;
    }
    .ss-menu-list {
        margin-top: 34px;
    }
    .ss-menu-list > li > a {
        font-size: 19px;
        line-height: 48px;
    }
    .ss-sub-toggle {
        height: 48px;
    }
    .ss-menu-deco {
        left: auto;
        right: 0;
    }

    .error-page h1 {
        font-size: 80px;
    }
    .error-page h4 {
        font-size: 32px;
        line-height: 1.2;
    }
}

/* ---------- Tablet portrait + mobile: centred layout (alignment only; sizes are set above) ---------- */
@media (max-width: 992px) {
    /* Hero: text centred, and centred vertically in the slide; dots centred */
    .ss-hero-content {
        margin: auto 0;
        text-align: center;
    }
    .ss-hero-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-hero-text > :not(h1, h2, h3, h4, h5, h6) {
        margin-left: auto;
        margin-right: auto;
    }
    .ss-hero-btns {
        justify-content: center;
        align-items: center;
    }
    .ss-hero-dots .slick-dots {
        justify-content: center;
    }

    /* Partner: title, line and button centred; the picture centred on what shows
       (frame at 0, the person ends at 80.9% of the box: it moves right by half the
       gap, 9.55% of its own width, which is min(100%, 560px)) */
    .ss-partner-copy .ss-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-partner-copy {
        text-align: center;
    }
    .ss-partner-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
        margin-left: auto;
        margin-right: auto;
    }
    .ss-partner-copy .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
        margin-left: auto;
        margin-right: auto;
    }
    .ss-partner-text > :not(h1, h2, h3, h4, h5, h6) {
        text-align: left;
    }
    .ss-partner-visual {
        left: calc(min(100%, 560px) * .0955);
    }

    /* Service model, technology, industries: titles (and their line / button) centred */
    .ss-model-copy .ss-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-ind-head .ss-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-tech-copy .ss-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-tech-copy {
        text-align: center;
    }
    .ss-tech-copy .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
        margin-left: auto;
        margin-right: auto;
    }
    .ss-tech-text > :not(h1, h2, h3, h4, h5, h6) {
        text-align: left;
    }

    /* Contact: everything centred */
    .ss-contact-copy {
        text-align: center;
    }
    .ss-contact-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-contact-text > :not(h1, h2, h3, h4, h5, h6) {
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
    }
    .ss-contact-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 0;
    }

    /* Form: title and intro centred */
    .ss-form-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-form-intro > :not(h1, h2, h3, h4, h5, h6) {
        text-align: center;
    }
    .ss-form-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-form-intro > :not(h1, h2, h3, h4, h5, h6) {
        margin-left: 0;
    }
    .ss-help-head {
        padding-right: 0;
        justify-content: center;
    }
}

/* ---------- Mobile refinements (after the centred tablet rules, so these win on phones) ---------- */
@media (max-width: 580px) {
    /* header: smaller Contact us button */
    .ss-btn-contact {
        width: 92px;
        height: 34px;
        font-size: 13px;
    }

    /* help cards: icon close to its label, equal space above and below */
    .ss-help-card {
        justify-content: center;
        gap: 8px;
        height: auto;
        min-height: 104px;
        padding: 16px 8px;
    }
    .ss-help-icon {
        height: 36px;
    }
    .ss-help-icon img {
        max-height: 36px;
    }
    .ss-help-label {
        min-height: 0;
        margin-top: 0;
    }

    /* every button full width, 45px tall */
    .ss-btn,
    .ss-hero-btns .ss-btn,
    .ss-btn--md,
    .ss-btn--lg,
    .ss-btn--xl,
    .ss-btn--submit {
        width: 100%;
        height: 45px;
        min-height: 0;
        padding: 0 16px;
        justify-content: center;
        font-size: 16px;
    }
    .ss-hero-btns {
        align-items: stretch;
    }

    /* technology: more room inside the dark card */
    .ss-tech-card {
        padding: 22px;
    }
    .ss-tech-copy {
        padding: 30px 8px 12px;
    }

    /* industries: smaller dots (0.675 of the desktop size); track on their centre */
    .ss-ind-dot {
        width: 28px;
        height: 22.3px;
        margin-top: 4px;
        background-size: 28px 22.3px;
    }
    .ss-ind-item.is-passed .ss-ind-dot,
    .ss-ind-item.is-active .ss-ind-dot {
        background-size: 22.1px 22.3px;
        background-position: 1.25px center;
    }
    .ss-ind-track {
        left: 11px;
    }

    /* people card: centred */
    .ss-people-card {
        text-align: center;
    }
    .ss-people-card .ss-title > :is(h1, h2, h3, h4, h5, h6),
    .ss-people-card .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
        margin-left: auto;
        margin-right: auto;
    }

    /* footer: everything centred */
    .ss-footer-grid,
    .ss-f-col {
        text-align: center;
    }
    .ss-f-col h3,
    .ss-f-office address,
    .ss-f-directions,
    .ss-f-follow,
    .ss-f-services h3 {
        margin-left: 0;
    }
    .ss-footer .ss-social {
        justify-content: center;
        margin-left: 0;
    }
    .ss-f-office address {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- Short desktop screens (e.g. 1366 x 768): smaller banner text so it fits the screen ---------- */
@media (min-width: 993px) and (max-height: 820px) {
    .ss-hero-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 38px;
        line-height: 50px;
    }
    .ss-hero-text > :not(h1, h2, h3, h4, h5, h6) {
        margin-top: 22px;
    }
    .ss-hero-text p {
        font-size: 17px;
        line-height: 28px;
    }
    .ss-hero-btns {
        margin-top: 34px;
    }
}

/* ---------- Very short desktop screens (e.g. 1280 x 600) ---------- */
@media (min-width: 993px) and (max-height: 680px) {
    .ss-hero-title > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 32px;
        line-height: 42px;
    }
    .ss-hero-text > :not(h1, h2, h3, h4, h5, h6) {
        margin-top: 16px;
    }
    .ss-hero-text p {
        font-size: 16px;
        line-height: 26px;
    }
    .ss-hero-btns {
        margin-top: 24px;
    }
    .ss-help-card {
        height: 112px;
        padding-top: 14px;
    }
    .ss-help-icon,
    .ss-help-icon img {
        max-height: 36px;
        height: 36px;
    }
    .ss-help-label {
        min-height: 46px;
    }
}

/* ---------- Small phones: help cards in two rows ---------- */
@media (max-width: 480px) {
    .ss-help-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .ss-help-label {
        font-size: 13px;
    }
}

/* Reduced motion: no zoom / pulse */
@media (prefers-reduced-motion: reduce) {
    .ss-hero-slide.slick-active .ss-hero-media img,
    .ss-play-outer {
        animation: none;
    }
    .ss-menu-list > li {
        transform: none;
    }
}