/* ==========================================================================
   Orion City — responsive
   >= 1512px : exact Figma layout (container caps at 1512 and centers)
   1300-1511 : laptop tiers (1366 / 1440) — gutter and fixed widths flex down
   1200-1299 : 1280 desktop — compact desktop nav, tighter columns
   <= 991    : tablet / mobile — hamburger nav, sections stack
   ========================================================================== */

@media (max-width: 1511px) {
    :root {
        --oc-gutter: 80px;
    }
    .oc-nav-list {
        gap: clamp(28px, calc(48px - (1512px - 100vw) * .06), 48px);
    }
    .oc-btn-getstarted {
        margin-left: clamp(24px, calc(50px - (1512px - 100vw) * .1), 50px);
    }

    .oc-tech {
        grid-template-columns: 40fr 60.3fr;
        margin-right: 0;
    }
    .oc-tech-photo {
        height: auto;
        aspect-ratio: 781.5 / 588.7;
    }
    .oc-eco-cards {
        grid-template-columns: repeat(4, minmax(0, 305px));
        justify-content: center;
        padding-left: 0;
    }
    .oc-why-list {
        width: auto;
        margin-left: 0;
    }
    .oc-map {
        flex: 0 1 474.4px;
        min-width: 0;
    }
    .oc-hub-list {
        flex: 0 0 669.5px;
        margin-left: 48px;
    }
    .oc-whysl-media {
        flex: 0 1 669px;
        min-width: 0;
    }
    .oc-whysl-copy {
        margin-left: 60px;
        min-width: 0;
    }
    .oc-whysl-copy h2 {
        width: auto;
        max-width: 505px;
    }
    .oc-footer-col--left {
        flex-basis: 610px;
    }
}

@media (max-width: 1366px) {
    :root {
        --oc-gutter: 60px;
    }
    .oc-hub-list {
        margin-left: 36px;
    }
    .oc-whysl-copy {
        margin-left: 48px;
    }
    .oc-whysl-list {
        grid-template-columns: 250px minmax(0, 1fr);
    }
    .oc-tech-copy {
        padding-top: 0;
    }
    .oc-tech-copy p {
        margin: 28px 0 36px 3px;
        font-size: 20px;
        line-height: 30px;
    }
    .oc-footer-col--right {
        padding-right: 20px;
    }
    .oc-sol-slider .oc-sol-item {
        width: 385px;
    }
    .oc-sol-img {
        height: 400px;
    }
    .oc-disc-slider .oc-news-card {
        width: 315px;
    }
    .oc-whysl-list .oc-feature:nth-child(n+3) {
        padding-right: 15px;
    }
}

@media (max-width: 1299px) {
    :root {
        --oc-gutter: 48px;
    }
    /* Hero card, compact (about 82% of the Figma size) */
    .oc-hero-card {
        width: 490px;
        height: auto;
        padding: 40px 34px 36px;
    }
    .oc-hero-card h1 {
        width: auto;
        font-size: 35px;
        line-height: 42px;
        letter-spacing: -.7px;
    }
    .oc-hero-text p {
        margin-top: 26px;
        font-size: 17px;
        line-height: 26px;
    }
    .oc-hero-fields {
        gap: 14px;
        margin-top: 22px;
    }
    .oc-field {
        height: 56px;
    }
    .oc-field select {
        padding: 0 38px 0 16px;
        font-size: 16px;
    }
    .oc-field--labelled label {
        top: 8px;
        left: 12px;
        font-size: 11px;
    }
    .oc-field--labelled select {
        padding: 18px 38px 0 11px;
        font-size: 16px;
    }
    .oc-field-caret {
        right: 16px;
    }
    .oc-field--city {
        flex: 217.4 1 0;
        width: auto;
    }
    .oc-field--service {
        flex: 272.5 1 0;
        width: auto;
    }
    .oc-btn-hero {
        width: 100%;
        height: 58px;
        margin-top: 28px;
        font-size: 20px;
        letter-spacing: -.8px;
    }

    .oc-logos > p {
        width: 290px;
    }

    /* Desktop nav, compact: logo, links and button tighten so the full menu
       still fits on one line down to 992px */
    .oc-logo {
        width: 148px;
    }
    .oc-nav-list {
        gap: clamp(14px, calc((100vw - 992px) * .085 + 14px), 40px);
    }
    .oc-nav-list a {
        font-size: 14px;
    }
    .oc-btn-getstarted {
        width: 124px;
        height: 40px;
        margin-left: 20px;
        font-size: 15px;
    }

    .oc-hubs-body {
        align-items: center;
    }
    .oc-map {
        flex: 1 1 474.4px;
        max-width: 474.4px;
    }
    .oc-hub-list {
        flex: 0 1 669.5px;
        min-width: 0;
        margin-left: 32px;
    }
    .oc-whysl-media {
        flex-basis: 52%;
        height: stretch;
    }
    .oc-whysl-media img {
        height: 100%;
        object-fit: cover;
    }
    .oc-hub-row p {
        width: auto !important;
        flex: 1;
        padding-right: 16px;
    }
    .oc-footer-col--left {
        flex-basis: 560px;
    }
    .oc-tech-copy h2 {
        font-size: 39px;
        line-height: 55px;
    }
    .oc-sol-slider .oc-sol-item {
        width: 408px;
    }
    .oc-sol-img {
        height: 420px;
    }
    .oc-disc-slider .oc-news-card {
        width: 296px;
    }
}

@media (max-width: 1200px) {
    :root {
        --oc-gutter: 30px;
    }

    /* Logos: caption centred on one line, all six logos on one row beneath it */
    .oc-logos {
        flex-direction: column;
        align-items: center;
        row-gap: 28px;
    }
    .oc-logos > p {
        width: auto;
        margin-left: 0;
        text-align: center;
        white-space: nowrap;
    }
    .oc-logos-track {
        width: 100%;
        margin-left: 0;
        transform: none;
    }

    /* Tech: copy starts level with the photo, tighter spacing */
    .oc-tech {
        align-items: start;
        margin-top: 56px;
    }
    .oc-tech-copy {
        padding-right: 32px;
    }
.oc-tech-copy h2 {
    font-size: 31px;
    line-height: 43px;
    letter-spacing: -.4px;
}
    .oc-tech-copy p {
        margin: 20px 0 28px 3px;
        font-size: 16px;
        line-height: 27px;
    }

    /* Ecosystem: all four cards on one row */
    .oc-eco-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
    .oc-eco-card {
        height: auto;
        padding: 40px 16px 36px;
    }
    .oc-eco-icon {
        height: 76px;
    }
    .oc-eco-icon > * {
        transform: scale(.82);
        transform-origin: bottom center;
    }
    .oc-eco-card h3 {
        margin-top: 8px;
        font-size: 22px;
        line-height: 36px;
    }
    .oc-eco-card p {
        width: auto;
        max-width: 220px;
        margin-top: 8px;
        font-size: 16px;
        line-height: 24px;
    }

    /* Why choose Orion City: all six on one row */
    .oc-why-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    /* Hubs: the card grows with its text (no clipping); the link sits under the text */
    .oc-hub-card {
        height: auto;
        min-height: 190.7px;
    }
    .oc-hub-img {
        height: auto;
        align-self: stretch;
    }
    .oc-hub-body {
        padding: 24px 22px 22px 24px;
    }
    .oc-hub-body h3 {
        font-size: 21px;
        line-height: 26px;
    }
    .oc-hub-body > p {
        margin: 4.8px 0 10px 1.9px;
        font-size: 16px;
        line-height: 25px;
    }
    .oc-hub-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .oc-hub-row p {
        width: auto !important;
        padding-right: 0;
    }

    /* Why Sri Lanka: photo on top, title centred, the four points on one row */
    .oc-whysl-grid {
        flex-direction: column;
    }
    .oc-whysl-media {
        flex: none;
        width: 100%;
        max-width: 669px;
        margin: 0 auto;
    }
    .oc-whysl-copy {
        width: 100%;
        margin: 56px 0 0;
    }
    .oc-whysl-title {
        text-align: center;
    }
    .oc-whysl-copy h2 {
        margin: 0 auto;
        max-width: 625px;
    }
    .oc-whysl-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 24px;
        margin: 0;
    }
    .oc-whysl-list .oc-feature,
    .oc-whysl-list .oc-feature:nth-child(n+3) {
        margin-top: 44px;
        padding: 0;
        border-top: 0;
    }
    .oc-whysl-list .oc-feature h4 {
        margin-top: 20px;
        line-height: 29px;
    }
    .oc-whysl-list .oc-feature p {
        margin-top: 12px;
    }

    /* Workspace solutions: Inquire button level with the title */
    .oc-btn-inquire {
        margin-top: 6px;
    }

    /* Inquiry form: single column (photo hidden) */
    .oc-rfq-panel {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    .oc-rfq-photo {
        display: none;
    }
    .oc-rfq-body {
        padding: 56px 48px 48px;
    }
    .oc-rfq-consent {
        margin-right: 0;
    }

    /* Footer: two columns kept, type and spacing reduced so nothing collides */
    .oc-footer-col--left {
        flex-basis: 50%;
        padding-top: 100px;
        padding-bottom: 80px;
    }
    .oc-footer-col--right {
        margin: 70px 0 50px;
        padding: 30px 0 11px 40px;
    }
    .oc-f-title {
        width: auto;
        max-width: 420px;
        font-size: 36px;
        line-height: 46px;
    }
    .oc-f-phone {
        font-size: 30px;
        line-height: 40px;
    }
    .oc-f-contacts {
        gap: 32px;
    }
    .oc-f-contact,
    .oc-f-contact + .oc-f-contact {
        flex: 0 1 auto;
    }
    .oc-f-mail {
        font-size: 18px;
    }
    .oc-f-legal {
        gap: 28px;
        font-size: 15px;
    }
    .oc-f-loc-title {
        margin-left: 0;
        font-size: 22px;
    }
    .oc-f-location {
        gap: 16px;
    }
    .oc-f-location-info h4 {
        font-size: 16px;
        line-height: 26px;
        white-space: normal;
    }
    .oc-f-location-info p {
        font-size: 14px;
        line-height: 24px;
    }
    .oc-f-icons {
        gap: 12px;
    }
    .oc-f-icons a,
    .oc-f-icons span {
        width: 36px;
        height: 36px;
    }
    .oc-f-copy {
        font-size: 14px;
        line-height: 24px;
        white-space: normal;
    }
.oc-intro {
    padding: 50px 0 85px;
}
.oc-why-title {
    margin-top: 62px;
}
.oc-sust {
    padding: 75px 0 80px;
}
.oc-hubs {
    padding: 75px 0 85px;
}
.oc-nav-list {
    gap: clamp(14px, calc((100vw - 992px) * .085 + 20px), 40px);
}
.oc-why-item p {
    font-size: 13px;
    line-height: 22px;
}
.oc-eco {
    padding: 84px 0 75px;
}
.oc-work {
    padding: 68px 0 80px;
}
.oc-whysl {
    padding: 90px 0 85px;
}
.oc-sol {
    padding: 75px 0 90px;
}
.oc-disc {
    padding: 40px 0 75px;
}
.oc-rfq {
    padding-top: 108px;
}
.oc-footer-stage {
    padding-top: 25px;
}
.oc-disc-slider .oc-news-card {
    width: 260px;
}
.oc-news-img {
    height: 375px;
}
.oc-disc-head {
    flex: 0 0 calc(var(--oc-gutter) + 300px);
}



}

@media (max-width: 991px) {
    :root {
        --oc-gutter: 30px;
        --oc-header-h: 104px;
    }

    /* Tablet portrait: the one-row grids from the 1200 tier become two / three columns */
    .oc-eco-cards {
        grid-template-columns: repeat(2, minmax(0, 305px));
    }
    .oc-why-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 40px;
    }
    .oc-whysl-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: center;
    }
    .oc-whysl-list .oc-feature-icon {
        justify-content: center;
    }
    .oc-whysl-list .oc-feature h4,
    .oc-whysl-list .oc-feature p {
        margin-right: auto;
        margin-left: auto;
    }

    /* Off-canvas navigation (tablet / mobile) */
    button#mob-menu-btn {
        z-index: 21; /* stays above the panel so it can close it */
        display: flex;
        margin-left: 14px;
    }
    .oc-mob-call {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin-left: auto;
        border: 1px solid rgba(51,52,121,.25);
        border-radius: 50%;
        color: var(--oc-primary);
        font-size: 15px;
        opacity: 0;
        visibility: hidden;
        transform: scale(.7);
        transition: opacity .3s ease, transform .3s ease, visibility .3s, background .3s, color .3s, border-color .3s;
    }
    .oc-header.scrolled .oc-mob-call {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .oc-mob-call:hover,
    .oc-mob-call:focus-visible {
        border-color: var(--oc-green);
        background: var(--oc-green);
        color: #fff;
    }
    /* Off-canvas panel: full height from the very top, above the top bar */
    .oc-navbar .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 20;
        width: 420px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        padding: 110px 40px 40px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        background: #fff;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform .5s ease, visibility .5s;
    }
    .oc-navbar .navbar-collapse.open {
        transform: translateX(0);
        visibility: visible;
        box-shadow: -10px 0 40px rgba(0,0,0,.12);
    }
    .oc-nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .oc-nav-list a {
        font-size: 20px;
    }
    .oc-btn-getstarted {
        width: 138px;
        height: 43px;
        margin: 32px 0 0;
        font-size: 16px;
    }
    /* Opening the panel: the links slide in from the right one after another,
       then the button. Closing simply fades them out together. */
    .oc-nav-list > li,
    .oc-navbar .oc-btn-getstarted {
        opacity: 0;
        transform: translateX(48px);
        transition: opacity .2s ease, transform .2s ease;
    }
    .navbar-collapse.open .oc-nav-list > li {
        opacity: 1;
        transform: none;
        transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1);
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(1) {
        transition-delay: .20s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(2) {
        transition-delay: .26s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(3) {
        transition-delay: .32s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(4) {
        transition-delay: .38s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(5) {
        transition-delay: .44s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(6) {
        transition-delay: .50s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(7) {
        transition-delay: .56s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(8) {
        transition-delay: .62s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(9) {
        transition-delay: .68s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(10) {
        transition-delay: .74s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(11) {
        transition-delay: .80s;
    }
    .navbar-collapse.open .oc-nav-list > li:nth-child(12) {
        transition-delay: .86s;
    }
    .navbar-collapse.open .oc-btn-getstarted {
        opacity: 1;
        transform: none;
        transition: opacity .45s ease .9s, transform .6s cubic-bezier(.22,1,.36,1) .9s, background-size .5s cubic-bezier(.22,1,.36,1), color .3s, border-color .3s, box-shadow .3s ease;
    }
    .oc-logo {
        width: 170px;
    }
    /* Blue fade over everything beside the panel (top bar and header included) */
    .oc-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 15;
        background: rgba(16,16,67,.62);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .4s ease, visibility .4s;
    }
    body.menu-opened .oc-nav-overlay {
        opacity: 1;
        visibility: visible;
    }
    body.menu-opened {
        overflow: hidden;
    }

    .oc-topbar-inner {
        height: 40px;
    }
    :root {
        --oc-topbar-h: 40px;
    }
    .oc-navbar {
        height: 64px;
    }

    .oc-hero {
        display: flex;
        align-items: center;
        height: auto;
        min-height: calc(100vh - var(--oc-header-h));
        min-height: calc(100svh - var(--oc-header-h));
        padding: 80px 0;
    }
    .oc-hero .oc-container {
        width: 100%;
        height: auto;
        padding-top: 0;
        justify-content: center;
    }
    .oc-hero-card {
        margin: 0 auto;
        width: 100%;
        max-width: 520px;
        height: auto;
        padding: 40px 32px;
    }
    .oc-hero-card h1 {
        width: auto;
        font-size: 32px;
        line-height: 40px;
    }
    .oc-hero-fields {
        flex-wrap: wrap;
    }
    .oc-field--city, .oc-field--service {
        flex: 1 1 200px;
        width: auto;
    }
    .oc-btn-hero {
        width: 100%;
    }

    .oc-tech {
        grid-template-columns: 1fr;
        gap: 50px;
        margin-top: 56px;
    }
    .oc-tech-copy {
        padding-right: 0;
        text-align: center;
    }
    .oc-tech-photo {
        order: -1;
    }
    .oc-tech-copy h2 {
        margin-left: 0;
        font-size: 36px;
        line-height: 46px;
    }
    .oc-tech-copy p {
        margin-left: 0;
    }
    .oc-tech-copy .oc-btn-outline {
        margin: 0 auto;
    }
    .oc-tech-copy p {
        font-size: 17px;
        line-height: 29px;
        margin: 30px 0 32px 3px;
    }

    .oc-eco-head h2 {
        font-size: 30px;
        line-height: 42px;
    }
    .oc-sust-head h2, .oc-hubs-title, .oc-work-title {
        font-size: 32px;
        line-height: 44px;
    }

    /* Facilities diagram: same as desktop, cropped to the area the tower,
       points and labels use (Figma x 134 to 1134) so it shows larger. The stage
       keeps its 1288 grid: it is 1.288x the column wide and pulled left by 134 units. */
    .oc-sust {
        overflow-x: clip;
    }
    .oc-diagram {
        width: calc(100% * 1288 / 1000);
        max-width: none;
        margin-left: calc(-100% * 134 / 1000);
    }

    .oc-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 12px;
        margin-top: 35px;
        text-align: center;
    }
    .oc-stat-num {
        font-size: clamp(26px, 5.6vw, 48px);
        line-height: 1.1;
        letter-spacing: -.5px;
    }
    .oc-stat-label {
        margin-top: 12px;
        font-size: clamp(13px, 2.4vw, 18px);
        line-height: 1.4;
    }

    .oc-hubs-body {
        flex-direction: column;
        margin-top: 45px;
    }
    .oc-map {
        flex: none;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
    .oc-hub-list {
        width: 100%;
        margin: 40px 0 0;
    }

    .oc-sol-head {
        justify-content: center;
        text-align: center;
    }
    .oc-sol-head h2 {
        width: auto;
        margin-left: 0;
        font-size: 32px;
        line-height: 44px;
    }
    .oc-sol-head .oc-btn-inquire {
        display: none;
    }
    .oc-sol-foot {
        display: flex;
        justify-content: center;
        margin-top: 44px;
    }
    .oc-sol-foot .oc-btn-inquire {
        margin: 0;
    }

    /* Testimonials: title centred; the featured slide keeps the desktop layout
       (sized to the column through --u); the review cards sit centred below */
    .oc-testi {
        padding: 60px 0 40px;
    }
    .oc-testi-grid {
        --u: 1px;
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        margin-left: 0;
        padding-bottom: 0;
    }
    .oc-testi-title {
        grid-area: auto;
        width: auto;
        height: auto;
        margin: 0 0 10px;
        text-align: center;
        font-size: 32px;
        line-height: 40px;
    }
    .oc-testi-title h2 {
        writing-mode: horizontal-tb;
        transform: none;
    }
    .oc-testi-main {
        --u: calc(100cqw / 784.4);
        grid-area: auto;
    }
    .oc-testi-dots {
        --u: 1px;
        display: flex;
        justify-content: center;
        margin: 28px 0 0;
    }
    .oc-testi-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-column: auto;
        grid-row: auto;
        padding-top: 56px;
    }
    .oc-testi-tag {
        margin: 0 0 24px;
        font-size: 30px;
        line-height: 38px;
    }
    /* The box is wider than the card by the peeking strip, so card + peek sit centred */
    .oc-testi-stack {
        --peek-x: 85px;
        --peek-s: .874;
        width: min(450px, 100%);
        min-height: 0;
        margin-top: 0;
        padding-right: 34px;
    }
    .oc-testi-card {
        padding: 32px 28px 30px;
    }
    .oc-testi-card-text {
        font-size: 17px;
        line-height: 28px;
    }
    .oc-testi-card-name,
    .oc-testi-card-role {
        max-width: calc(100% - 80px);
    }
    .oc-testi-card-name {
        padding: 24px 0 0;
        font-size: 20px;
        line-height: 30px;
    }
    .oc-testi-card-role {
        margin-top: 0;
        padding-left: 0;
        font-size: 16px;
        line-height: 26px;
    }
    .oc-testi-nav {
        justify-self: end;
        margin: 0 28px 32px 0;
    }
    .oc-testi-nav button {
        width: 32px;
        height: 32px;
    }

    .oc-disc-flex {
        flex-direction: column;
    }
    .oc-disc-head {
        flex: none;
        padding: 0 var(--oc-gutter) 42px;
    }
    .oc-disc-head {
        text-align: center;
        width: 100%;
    }
    .oc-disc-head h2, .oc-disc-head p {
        width: auto;
        margin-right: auto;
        margin-left: auto;
    }
    .oc-disc-carousel {
        width: 100%;
    }
    .oc-disc-slider {
        width: 100%;
        --oc-bleed-start: var(--oc-gutter);
        overflow: hidden;
    }
    .oc-disc-slider .slick-list {
        overflow: visible;
        padding-left: var(--oc-gutter) !important;
        margin-left: 0;
    }
    .oc-disc {
        overflow: hidden;
    }

    .oc-rfq {
        padding-top: 80px;
    }
    .oc-rfq-bgimg {
        display: none;
    }

    .oc-footer-stage {
        flex-direction: column;
        padding: 120px 0 40px;
    }
    .oc-footer-col--left {
        flex: none;
        padding: 0;
        text-align: center;
    }
    .oc-footer-col--right {
        flex: none;
        margin: 48px 0 0;
        padding: 32px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.2);
    }
    .oc-f-title {
        width: auto;
        max-width: 520px;
        margin: 0 auto;
        font-size: 34px;
        line-height: 44px;
    }
.oc-f-hotline {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    .oc-f-contacts {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 48px;
        margin-top: 24px;
    }
    .oc-f-contact {
        flex: 0 1 auto;
    }
    .oc-f-follow {
        margin-top: 28px;
    }
    .oc-f-social {
        justify-content: center;
        margin-top: 12px;
    }
    .oc-f-legal {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 28px;
        margin-top: 28px;
        line-height: 1.8;
    }
    .oc-f-loc-title {
        margin-left: 0;
        text-align: center;
    }
    .oc-f-locations {
        margin-top: 20px;
    }
    .oc-f-location + .oc-f-location {
        margin-top: 28px;
    }
    .oc-f-location-info h4 {
        white-space: normal;
    }
    .oc-f-copy {
        margin-top: 36px;
        padding-top: 0;
        text-align: center;
        white-space: normal;
    }
    .oc-intro {
    padding: 50px 0 75px;
}
.oc-hubs {
    padding: 70px 0 65px;
}
.oc-testi-name, .oc-testi-role {
    padding-right: 0;
}
.oc-testi-logo{
    margin-right: 0;
}
.oc-disc-head p {
    margin: 28px 0 0 1px;
    margin-right: auto;
    margin-left: auto;
}
.oc-disc-slider {
    --oc-slide-gap: 25px;
}
.oc-rfq-consent {
    margin: 22px 0 0 0;
    font-size: 14px;
    line-height: 24px;
}
.oc-cf-actions {
    margin: 25px 0 0 0;
    justify-content: center;
}
.oc-rfq-body {
    padding: 56px 48px 60px;
}
.oc-rfq-text h2 {
    text-align: center;
}
.oc-rfq-text p {
    max-width: 88%;
    margin: 20px auto 0;
}

}

@media (max-width: 767px) {
    :root {
        --oc-gutter: 20px;
        --oc-header-h: 64px;
    }
    .oc-logos > p {
        white-space: normal;
    }
    .oc-whysl-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .oc-whysl-copy h2,
    .oc-whysl-list .oc-feature h4,
    .oc-whysl-list .oc-feature p {
        width: auto;
        max-width: none;
    }
    .oc-topbar {
        display: none;
    }
    .oc-logo {
        width: 138px;
    }
    button#mob-menu-btn {
        width: 38px;
        height: 38px;
        margin-left: 10px;
    }
    button#mob-menu-btn span {
        left: 6px;
        width: 26px;
        height: 2.5px;
    }
    button#mob-menu-btn span:nth-child(1) {
        transform: translateY(-8px);
    }
    button#mob-menu-btn span:nth-child(2) {
        transform: translateY(8px);
    }
    button#mob-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg);
    }
    button#mob-menu-btn.active span:nth-child(2) {
        transform: rotate(-45deg);
    }
    .oc-mob-call {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .oc-hero {
        padding: 40px 0;
    }
    .oc-hero-card {
        max-width: 300px;
        padding: 26px 20px 24px;
    }
    .oc-hero-card h1 {
        font-size: 24px;
        line-height: 32px;
        text-align: center;
    }
    .oc-hero-text p {
        margin-top: 14px;
        font-size: 15px;
        line-height: 23px;
        text-align: center;
    }
    .oc-hero-fields {
        gap: 12px;
        margin-top: 20px;
    }
    .oc-hero-card .oc-field {
        height: 52px;
    }
    .oc-hero-card .oc-field select {
        font-size: 16px;
    }
    .oc-field--labelled label {
        top: 7px;
        font-size: 12px;
    }
    .oc-field--labelled select {
        padding-top: 16px;
    }
    .oc-btn-hero {
        height: 45px;
        font-size: 16px;
        margin-top: 18px;
    }

    .oc-intro {
        padding: 40px 0 60px;
    }
    .oc-logos > p {
        width: 100%;
        margin: 0;
            font-size: 17px;
    line-height: 27px;
    }
    .oc-logos-track {
        --logo-s: .75;
        --logo-gap: 36px;
        --marquee-time: 30s;
    }
    .oc-tech-copy h2 {
        font-size: 30px;
        line-height: 40px;
    }
    .oc-tech-copy p {
        margin: 20px 0 28px;
    }
    .oc-btn-outline {
        height: 46px;
        padding: 0 20px 0 16px;
        font-size: 16px;
    }
    /* Section descriptions: one size everywhere on phones */
    .oc-tech-copy p,
    .oc-eco-head p,
    .oc-sust-head p,
    .oc-disc-head p,
    .oc-rfq-text p {
        font-size: 16px;
        line-height: 26px;
    }

    .oc-eco, .oc-sust, .oc-hubs, .oc-work, .oc-whysl, .oc-sol, .oc-disc {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .oc-eco-head h2 {
        font-size: 26px;
        line-height: 36px;
    }
    .oc-eco-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 42px;
    }
    .oc-eco-card {
        padding: 26px 10px 22px;
        border-radius: 14px;
    }
    .oc-eco-icon {
        height: 62px;
    }
    .oc-eco-icon > * {
        transform: scale(.62);
    }
    .oc-eco-card h3 {
        margin-top: 10px;
        font-size: 18px;
        line-height: 26px;
    }
    .oc-eco-card p {
        max-width: none;
        margin-top: 10px;
        font-size: 14px;
        line-height: 20px;
    }
    .oc-why-list {
        grid-template-columns: repeat(2, 1fr);
        margin: 38px 0 0 0;
    }

    .oc-sust-head h2, .oc-hubs-title, .oc-work-title, .oc-sol-head h2, .oc-whysl-copy h2, .oc-disc-head h2 {
        font-size: 28px;
        line-height: 38px;
    }
    .oc-disc-head p {
        margin-top: 16px;
    }
    /* Phones: a slightly wider crop (Figma x 80 to 1240) leaves room for the larger labels */
    .oc-diagram {
        width: calc(100% * 1288 / 1160);
        margin-left: calc(-100% * 80 / 1160);
    }
    .oc-diagram-label {
        font-size: max(10px, calc(19 * var(--u)));
        line-height: max(14px, calc(29 * var(--u)));
    }
    /* left-side labels grow to the left (away from their icon) */
    .oc-diagram-label.is-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    /* Popup: a card centred on the screen (custom.js moves it to the body on
       phones so it can be fixed); the facility's label and icon stay hidden
       under the blur while it is open */
    .oc-dg-pop,
    .oc-dg-pop.is-right {
        position: fixed;
        z-index: 1002;
        left: 50%;
        top: 50%;
        width: min(340px, calc(100vw - 40px));
        min-height: 0;
        padding: 18px 20px 24px;
        border-radius: 18px;
        transform: translate(-50%, -50%) scale(.94);
        transform-origin: 50% 50%;
    }
    .oc-dg-pop.is-visible {
        transform: translate(-50%, -50%);
    }
    .oc-diagram.is-open > .is-active {
        opacity: 0;
    }
    .oc-dg-pop-close,
    .oc-dg-pop.is-right .oc-dg-pop-close {
        top: 12px;
        right: 12px;
        left: auto;
    }
    .oc-dg-pop h3,
    .oc-dg-pop.is-right h3 {
        padding: 0 40px 0 0;
        font-size: 22px;
        line-height: 34px;
    }
    .oc-dg-pop-body p {
        margin-top: 8px;
    }
    .oc-dg-more {
        margin-top: 18px;
    }
    .oc-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px;
        margin-top: 48px;
    }
    .oc-stat-num {
        font-size: 44px;
    }
    .oc-stat-label {
        margin-top: 10px;
        font-size: 17px;
    }
    .oc-map {
        max-width: 300px;
    }

    .oc-hub-card {
        flex-direction: column;
        height: auto;
    }
    .oc-hub-card + .oc-hub-card {
        margin-top: 20px;
    }
    .oc-hub-card::after {
        left: 0;
        border-radius: 0 0 7px 7px;
    }
    .oc-hub-img {
        flex: none;
        width: 100%;
        height: 200px;
    }
    .oc-hub-body {
        padding: 22px 20px 24px;
    }
    .oc-hub-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .oc-hub-row p {
        padding-right: 0;
    }

    .oc-gallery-card {
        width: 220px !important;
        height: 320px;
    }
    .oc-work-slider .oc-gallery-card .oc-gallery-label {
        left: 20px;
        bottom: 26px;
        width: auto;
        max-width: calc(100% - 64px);
        font-size: 22px;
        line-height: 28px;
    }
    .oc-work-slider .oc-gallery-card .oc-gallery-arrow {
        top: auto;
        right: 20px;
        bottom: 30px;
        width: 20px;
        height: 20px;
    }
    .oc-sol-slider {
        --oc-slide-gap: 20px;
    }
    .oc-sol-item {
        width: 300px !important;
    }
    .oc-sol-foot {
        margin-top: 36px;
    }
    .oc-sol-foot .oc-btn-inquire {
        width: 170px;
        height: 46px;
        font-size: 17px;
    }
    .oc-sol-img {
        height: 320px;
    }
    .oc-carousel-arrow {
        width: 40px;
        height: 40px;
    }
    .oc-carousel-arrow svg {
        width: 18px;
        height: 18px;
    }
    .oc-work-arrows {
        gap: 8px;
    }
    .oc-sol-card h3 {
        white-space: normal;
        font-size: 20px;
    line-height: 30px;
    }
    .oc-news-card {
        width: 220px !important;
    }
    .oc-news-img {
        height: 290px;
    }
    .oc-bleed {
        --oc-bleed-end: var(--oc-gutter);
    }

    /* Featured testimonial on phones: same side-by-side layout, the quote mark
       above the text so the text gets the full column */
    .oc-testi-feature .oc-testi-slide {
        align-items: flex-end;
    }
    .oc-testi-photo {
        flex-basis: 45%;
    }
    .oc-testi-body {
        flex: 1 1 0;
        min-width: 0;
        margin-left: -5%;
        padding-top: 6%;
    }
    .oc-testi-quote {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -.2px;
    }
    .oc-testi-quote img {
        width: 40px;
        height: 30px;
        margin-top: 0;
    }
    .oc-testi-quote blockquote {
        flex: none;
    }
    .oc-testi-name {
        margin-top: 14px;
        padding-right: 0;
        font-size: 17px;
        line-height: 26px;
    }
    .oc-testi-role {
        margin-top: 0;
        padding-right: 0;
        font-size: 14px;
        line-height: 22px;
    }
    .oc-testi-logo {
        width: 120px;
        height: 27px;
        margin: 12px 0 0;
    }
    .oc-testi-dots .slick-dots {
        gap: 12px;
    }
    .oc-testi-dots .slick-dots li {
        width: 9px;
        height: 9px;
    }
    .oc-testi-tag {
        font-size: 26px;
        line-height: 34px;
    }
    .oc-testi-stack {
        --peek-x: 58px;
        width: calc(100% - 30px);
        padding-right: 42px;
    }
    .oc-testi-card {
        padding: 26px 22px 26px;
    }
    .oc-testi-card-text {
        font-size: 16px;
        line-height: 26px;
    }
    .oc-testi-nav {
        margin: 0 22px 28px 0;
    }

    .oc-rfq-body {
        padding: 36px 20px 32px;
    }
    .oc-rfq-text h2 {
        margin-left: 0;
        font-size: 28px;
        line-height: 38px;
    }
    .oc-rfq-text p {
        margin-left: 0;
                max-width: 100%;
        text-align: center;
    }
    .oc-cf-grid {
        grid-template-columns: 1fr;
    }
    .oc-rfq-consent {
        margin-left: 0;
        line-height: 24px;
    }
    .oc-cf-actions {
        flex-wrap: wrap;
        margin-left: 0;
    }
    .oc-rfq-form .oc-btn-submit {
        width: 100%;
        height: 50px;
        font-size: 18px;
    }
    .oc-cf-field {
        height: 52px;
    }
    .oc-seat-btn {
        flex-basis: 52px;
        height: 52px;
    }
    .oc-cf-label {
        left: 16px;
        font-size: 16px;
    }
    .oc-cf-float.is-focus .oc-cf-label,
    .oc-cf-float.is-filled .oc-cf-label,
    .oc-cf-float:focus-within .oc-cf-label,
    .oc-cf-field--select .oc-cf-label,
    .oc-cf-seats .oc-cf-label {
        top: 7px;
        left: 14px;
        font-size: 12px;
    }
    .oc-cf-input {
        padding: 17px 14px 0;
        font-size: 16px;
    }
    .oc-cf-field--phone .iti__selected-country-primary {
        padding: 0 10px 0 16px;
    }
    .oc-cf-field--phone .iti__selected-country .iti__flag {
        width: 21px;
        height: 21px;
    }
    .oc-cf-field--phone .iti__selected-dial-code {
        margin: 0 12px 0 10px;
        font-size: 16px;
    }
    .oc-f-title {
        font-size: 28px;
        line-height: 38px;
    }
    .oc-f-phone {
        font-size: 28px;
    }
    .oc-f-mail {
        font-size: 19px;
    }
    .oc-f-legal {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .oc-f-copy br {
        display: none;
    }
    .oc-tech {
    gap: 38px;
    margin-top: 50px;
}
.oc-why-title {
    margin-top: 45px;
}
.oc-more {
    margin-top: 5px;
}
.oc-work-carousel {
    margin-top: 32px;
}
.oc-work {
    padding: 55px 0 60px;
}
.oc-whysl-list .oc-feature, .oc-whysl-list .oc-feature:nth-child(n+3) {
    margin-top: 35px;
}
.oc-sol-carousel {
    margin-top: 35px;
}
.oc-sol {
    padding: 55px 0 60px;
}
.oc-explore {
    padding-top: 0;
    margin-top: 15px;
}
.oc-testi-nav button {
    width: 28px;
    height: 28px;
}
.oc-disc {
    padding: 30px 0 60px;
}
.oc-footer-stage {
    padding: 110px 0 55px;
}
.oc-disc-slider {
    --oc-slide-gap: 20px;
}





}

/* Menu entrance without movement for visitors who prefer reduced motion */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
    .oc-nav-list > li,
    .oc-navbar .oc-btn-getstarted {
        transform: none;
    }
    .navbar-collapse.open .oc-nav-list > li,
    .navbar-collapse.open .oc-btn-getstarted {
        transition-delay: 0s;
    }
}