/* ==========================================================================
   Orion City — Homepage
   All measurements are taken from the Figma file "Orion City - Homepage V2.2"
   (designed on a 1512px canvas: 112px side gutter -> 1288px content width).
   ========================================================================== */

:root {
    --oc-primary: #2f3092;
    --oc-primary-dark: #1f2568;
    --oc-green: #0b9444; /* logo green: link + button hover */
    --oc-green-dark: #087a37;
    --oc-green-light: #2bb866; /* same green, lifted for dark backgrounds (footer, photos) */
    --oc-font-serif: 'Roboto Serif', serif;
    --oc-font-sans: 'Roboto', sans-serif;
    --oc-container-max: 1512px;
    --oc-gutter: 112px;
    --oc-header-h: 127px;
    --oc-topbar-h: 47px;
}

/* ==========================================================================
   Base / resets
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    overflow-x: hidden;
}
body {
    font-family: var(--oc-font-sans);
    color: #3d3d3f;
    overflow-x: clip; /* clip (not hidden) so position: sticky keeps working */
    padding-top: var(--oc-header-h);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    font-weight: 400;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
    transition: .3s;
}
a:hover {
    color: var(--oc-green);
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}
button:focus, input:focus, textarea:focus, select:focus {
    box-shadow: none !important;
    outline: none;
}
section {
    position: relative;
}

.oc-container {
    width: 100%;
    max-width: var(--oc-container-max);
    margin: 0 auto;
    padding-left: var(--oc-gutter);
    padding-right: var(--oc-gutter);
}
.oc-serif {
    font-family: var(--oc-font-serif);
}
.oc-mirror {
    transform: scaleX(-1);
}

/* ---------- Proportional "stage" for illustrative compositions ----------
   Children are positioned in Figma pixels (--x/--y/--w/--h) and scale with
   the stage width through container-query units. */
.oc-stage {
    position: relative;
    width: 100%;
    container-type: inline-size;
}
.oc-abs {
    position: absolute;
    left: calc(var(--x, 0) * var(--u));
    top: calc(var(--y, 0) * var(--u));
}
.oc-w {
    width: calc(var(--w) * var(--u));
}
.oc-h {
    height: calc(var(--h) * var(--u));
}
.oc-stage img {
    max-width: none;
}

/* Mobile navbar toggle */
button#mob-menu-btn {
    position: relative;
    width: 50px;
    height: 50px;
    display: none;
    align-items: center;
    overflow: hidden;
}
button#mob-menu-btn span {
    position: absolute;
    left: 8px;
    width: 34px;
    height: 3px;
    background: #1f1d1d;
    border-radius: 5px;
    transition: .5s;
}
button#mob-menu-btn span:nth-child(1) {
    transform: translateY(-10px);
}
button#mob-menu-btn span:nth-child(2) {
    transform: translateY(10px);
}
button#mob-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg);
}
button#mob-menu-btn.active span:nth-child(2) {
    transform: rotate(-45deg);
}
button#mob-menu-btn.active span:nth-child(3) {
    transform: translateX(60px);
}

/* Back to top */
.back-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 99;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--oc-primary);
    color: #fff;
    font-size: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(47,48,146,.35);
}

body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-track {
    background: #f5f5f5;
}
body::-webkit-scrollbar-thumb {
    background: var(--oc-primary);
    border-radius: 10px;
}

/* ==========================================================================
   Header — 127px (topbar 47 + nav 80)
   ========================================================================== */
.oc-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    transition: box-shadow .3s;
}
.oc-header.scrolled {
    box-shadow: 0 6px 24px rgba(20,20,60,.10);
}

.oc-topbar {
    background: #ededed;
    transition: margin-top .35s ease;
}
/* Once the page scrolls, the top bar slides up out of view: only the logo + menu row stays */
.oc-header.scrolled .oc-topbar {
    margin-top: calc(-1 * var(--oc-topbar-h));
}
.oc-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 47px;
}
.oc-topbar-left {
    display: flex;
    align-items: center;
    gap: 37px;
    padding-left: 4px;
}
.oc-topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-right: 9px;
}
.oc-topbar-right div {
    display: flex;
    align-items: center;
}
.oc-topbar a {
    font-size: 15px;
    line-height: 1;
    color: #404040;
    display: inline-flex;
    align-items: center;
}
.oc-topbar a:hover {
    color: var(--oc-green);
}
.oc-topbar-caret {
    width: 12px;
    height: 7px;
    margin-left: 14px;
}
.oc-topbar-phone-ic {
    width: 14px;
    height: 14px;
    margin-right: 12px;
}
.oc-topbar a.oc-topbar-num {
    color: #000;
}
.oc-topbar a.oc-topbar-num:hover {
    color: #0d9244;
}
/* Service Requests dropdown */
.oc-topbar-dd {
    position: relative;
}
.oc-topbar-dd-btn {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    line-height: 1;
    color: #404040;
    transition: color .3s;
}
.oc-topbar-dd-btn:hover, .oc-topbar-dd.is-open .oc-topbar-dd-btn {
    color: var(--oc-green);
}
.oc-topbar-dd-btn:focus-visible {
    outline: 2px solid var(--oc-primary);
    outline-offset: 4px;
    border-radius: 2px;
}
.oc-topbar-caret {
    transition: transform .3s ease;
}
.oc-topbar-dd.is-open .oc-topbar-caret {
    transform: rotate(180deg);
}
.oc-topbar-dd-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: -20px;
    z-index: 5;
    min-width: 262px;
    padding: 10px 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(20,20,60,.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.oc-topbar-dd-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 34px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}
.oc-topbar-dd.is-open .oc-topbar-dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.oc-topbar .oc-topbar-dd-menu a {
    position: relative;
    display: flex;
    padding: 11px 24px;
    font-size: 14.5px;
    line-height: 1.3;
    color: #404040;
}
.oc-topbar .oc-topbar-dd-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--oc-green);
    transform: scaleY(0);
    transition: transform .25s ease;
}
.oc-topbar .oc-topbar-dd-menu a:hover, .oc-topbar .oc-topbar-dd-menu a:focus-visible {
    background: #eef8f2;
    color: var(--oc-green);
    outline: none;
}
.oc-topbar .oc-topbar-dd-menu a:hover::before, .oc-topbar .oc-topbar-dd-menu a:focus-visible::before {
    transform: scaleY(1);
}
.oc-topbar-dd-menu li:last-child {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #ececf2;
}
.oc-topbar .oc-topbar-dd-menu li:last-child a {
    font-weight: 500;
    color: var(--oc-primary);
}

.oc-navbar {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0;
    flex-wrap: nowrap;
}
.oc-logo {
    display: block;
    flex: none;
    width: 170px;
    margin: 2px 0 0 1px;
}
.oc-logo img {
    display: block;
    width: 100%;
    height: auto;
}
/* Call shortcut beside the menu toggle and the menu overlay: tablet / mobile only (responsive.css) */
.oc-mob-call,
.oc-nav-overlay {
    display: none;
}

.oc-navbar .navbar-collapse {
    flex-grow: 1;
}
.oc-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.oc-nav-list {
    display: flex;
    align-items: center;
    gap: 48px;
}
.oc-nav-list a {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: #000;
    line-height: 1;
}
.oc-nav-list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--oc-green);
    transition: width .3s;
}
.oc-nav-list a:hover {
    color: var(--oc-green);
}
.oc-nav-list a:hover::after {
    width: 100%;
}
.oc-btn-getstarted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 138px;
    height: 43px;
    margin-left: 50px;
    border-radius: 5px;
    background: var(--oc-primary);
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    flex-shrink: 0;
}

/* ==========================================================================
   Hero — 794px tall photo, 598x473 card
   ========================================================================== */
/* Fits the screen below the fixed header. On the 1512 x 921 Figma frame this
   is 794px, and the top padding (81px, shrinking on shorter screens) puts the
   card at Figma's top: 201px. */
.oc-hero {
    height: calc(100vh - var(--oc-header-h));
    height: calc(100svh - var(--oc-header-h));
    min-height: 600px;
    overflow: hidden;
}
.oc-hero-bg {
    position: absolute;
    inset: 0;
    background: #2c2c34;
}
.oc-hero-bg img, .oc-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.oc-hero .oc-container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: clamp(0px, calc(100svh - var(--oc-header-h) - 713px), 81px);
}
.oc-hero-card {
    position: relative;
    flex: none;
    margin-left: 3px;
    width: 598px;
    height: 473px;
    padding: 50px 41px 0;
    border-radius: 8px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(6px);
}
.oc-hero-card h1 {
    width: 512px;
    margin-left: 2px;
    font-family: var(--oc-font-serif);
    font-size: 43px;
    line-height: 50px;
    letter-spacing: -.86px;
    color: #313132;
}
.oc-hero-text p {
    margin: 38px 0 0 1px;
    font-size: 20px;
    line-height: 31px;
    letter-spacing: -.2px;
    color: #2f2d32;
}
.oc-hero-fields {
    display: flex;
    gap: 17.5px;
    margin-top: 28px;
    justify-content: space-between;
}
.oc-field {
    position: relative;
    height: 67.7px;
    border: 1px solid #a29c9c;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 4px 23px rgba(0,0,0,.1);
}
.oc-field select {
    width: 100%;
    height: 100%;
    padding: 0 44px 0 19px;
    border: 0;
    background: transparent;
    font-size: 18px;
    color: #514f4f;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.oc-field-caret {
    position: absolute;
    right: 19px;
    top: 50%;
    width: 13px;
    height: 7px;
    margin-top: -2px;
    pointer-events: none;
}
.oc-field--labelled label {
    position: absolute;
    top: 10.5px;
    left: 14px;
    font-size: 13px;
    line-height: 1.2;
    color: #787575;
    pointer-events: none;
}
.oc-field--labelled select {
    padding: 22px 44px 0 13px;
    font-size: 19px;
    color: #000;
}
.oc-field--city {
    width: 222px;
}
.oc-field--service {
    width: 272px;
}
.oc-btn-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 72.5px;
    margin-top: 38.5px;
    border-radius: 5px;
    background: var(--oc-primary);
    color: #fff;
    font-family: var(--oc-font-serif);
    font-size: 24px;
    letter-spacing: -.96px;
}

/* ==========================================================================
   Trusted logos + Tech companies
   ========================================================================== */
.oc-intro {
    padding: 50px 0 101px;
}
.oc-logos {
    display: flex;
    align-items: center;
}
.oc-logos > p {
    flex: none;
    width: 330px;
    margin-left: 5px;
    font-size: 20px;
    line-height: 31px;
    color: #2f2d32;
}
.oc-logos > p strong {
    font-weight: 700;
    color: var(--oc-primary);
}
/* Client logos: a continuous, slow marquee (two identical sets, the strip moves
   left by one set and starts over). One gap between every logo. */
.oc-logos-track {
    --logo-s: 1;
    --logo-gap: 56px;
    --marquee-time: 40s;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 48px;
    overflow: hidden;
    transform: translateY(-8px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.oc-logos-marquee {
    display: flex;
    width: max-content;
    animation: ocMarquee var(--marquee-time) linear infinite;
}
.oc-logos-track:hover .oc-logos-marquee {
    animation-play-state: paused;
}
.oc-logos-set {
    display: flex;
    flex: none;
    align-items: center;
}
/* Every logo gets the same box: 46px tall, up to 150px wide (scaled by --logo-s) */
.oc-client {
    flex: none;
    width: auto;
    height: calc(46px * var(--logo-s));
    max-width: calc(150px * var(--logo-s));
    margin-right: var(--logo-gap);
    object-fit: contain;
}
@keyframes ocMarquee {
    to {
        transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .oc-logos-marquee {
        animation: none;
    }
}
.oc-tech {
    display: grid;
    grid-template-columns: 515px 781.5px;
    margin-top: 78px;
    margin-right: -8.5px;
}
.oc-tech-copy {
    padding: 18px 44px 0 0;
}
.oc-tech-copy h2 {
    margin-left: -1px;
    font-family: var(--oc-font-serif);
    font-size: 45px;
    line-height: 58px;
    letter-spacing: -.9px;
    color: #333479;
}
.oc-tech-copy p {
    margin: 32px 0 44px 3px;
    font-size: 20px;
    line-height: 34px;
    color: #2f2f31;
}
.oc-btn-outline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    height: 58.4px;
    padding: 0 30px 0 20px;
    border: 2px solid var(--oc-primary);
    border-radius: 8px;
    color: var(--oc-primary);
    font-size: 19px;
    font-weight: 600;
    gap: 15px;
}
.oc-btn-outline svg {
    width: 14px;
    height: 13px;
}
.oc-tech-photo {
    height: 588.7px;
    border-radius: 15px;
    overflow: hidden;
}
.oc-tech-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Ecosystem (dark) — 1036px
   ========================================================================== */
.oc-eco {
    padding: 84px 0 92px;
    background: linear-gradient(229deg, #22236b 4.6%, #101043 92.8%);
    text-align: center;
    color: #fff;
}
.oc-eco-head h2 {
    font-family: var(--oc-font-serif);
    font-size: 37px;
    line-height: 60px;
    letter-spacing: -1.11px;
    color: #fff;
}
.oc-eco-head p {
    width: 807.5px;
    max-width: 100%;
    margin: 22px auto 0;
    font-size: 18px;
    line-height: 29px;
    letter-spacing: -.18px;
    color: #b3b3b3;
}
.oc-eco-cards {
    display: grid;
    grid-template-columns: repeat(4, 305px);
    gap: 21.7px;
    justify-content: start;
    margin-top: 56.5px;
    padding-left: 6.2px;
}
.oc-eco-card {
    height: 334px;
    padding-top: 70px;
    border: 1px solid #242748;
    border-radius: 20px;
    background: linear-gradient(219deg, rgb(39,39,112) 7%, rgb(30,36,96) 89%);
    box-shadow: 0 4px 54px 10px rgba(0,0,0,.11);
    backdrop-filter: blur(2px);
    transition: transform .4s ease;
}
.oc-eco-card:hover {
    transform: translateY(-8px);
}
/* All four icons sit on one baseline (the Workspace card's), so headings and
   text line up across the cards */
.oc-eco-icon {
    position: relative;
    height: 90px;
    padding-bottom: 7px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.oc-eco-icon img {
    width: auto;
    height: auto;
    max-width: 115px;
    max-height: 83px;
}
.oc-eco-card h3 {
    margin-top: 6px;
    font-size: 26px;
    line-height: 47px;
    font-weight: 500;
    color: rgba(255,255,255,.99);
}
.oc-eco-card p {
    width: 250px;
    max-width: calc(100% - 32px);
    margin: 14px auto 0;
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: -.31px;
    color: rgba(255,255,255,.99);
}

.oc-why-title {
    margin-top: 77.5px;
    font-family: var(--oc-font-serif);
    font-size: 29px;
    line-height: 60px;
    letter-spacing: -.87px;
    color: #fff;
}
.oc-why-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 1307px;
    margin: 51px 0 0 -7.5px;
}
.oc-why-icon {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s;
}
.oc-why-item:hover .oc-why-icon {
    transform: translateY(-5px);
}
.oc-why-item p {
    margin: 29px auto 0;
    font-family: var(--oc-font-serif);
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -.15px;
    color: #fff;
}

/* ==========================================================================
   Building a Sustainable Future
   ========================================================================== */
.oc-sust {
    padding: 84px 0 87px;
    text-align: center;
}
.oc-sust-head h2 {
    font-family: var(--oc-font-serif);
    font-size: 41px;
    line-height: 60px;
    letter-spacing: -1.23px;
    color: #363131;
}
.oc-sust-head p {
    width: 889px;
    max-width: 100%;
    margin: 16.4px auto 0;
    font-size: 19px;
    line-height: 32px;
    letter-spacing: -.19px;
    color: #3d3d3f;
}
.oc-diagram {
    --u: calc(100cqw / 1288);
    aspect-ratio: 1288 / 742;
    margin-top: 22.3px;
    text-align: left;
}
.oc-diagram-label {
    font-family: var(--oc-font-serif);
    font-size: calc(19 * var(--u));
    line-height: calc(29 * var(--u));
    color: #474757;
}
.oc-diagram-label.is-right {
    text-align: right;
}
.oc-diagram-label[data-dg] {
    cursor: pointer;
}

/* Facility points: click opens the popup */
.oc-diagram > * {
    transition: filter .4s ease, opacity .4s ease;
}
.oc-dg-point {
    z-index: 2;
    border-radius: 50%;
    transition: transform .3s ease, filter .4s ease, opacity .4s ease;
}
.oc-dg-point img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.oc-dg-point::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(47,48,146,.35);
    animation: ocDgPulse 2.6s ease-out infinite;
    pointer-events: none;
}
.oc-dg-point:hover, .oc-dg-point:focus-visible {
    transform: scale(1.08);
}
.oc-dg-point:focus-visible {
    outline: 2px solid var(--oc-primary);
    outline-offset: 3px;
}
.oc-dg-point.is-active {
    transform: none;
}
.oc-dg-point.is-active::after {
    animation: none;
    opacity: 0;
}
@keyframes ocDgPulse {
    0% {
        transform: scale(1);
        opacity: .9;
    }
    70% {
        transform: scale(1.45);
        opacity: 0;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

/* Open state: the stage rises above a page-wide blur, and everything in it
   except the active point, its label and the popup is blurred the same way */
.oc-dg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(255,255,255,.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s;
}
.oc-dg-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
.oc-diagram.is-open {
    z-index: 1001;
}
.oc-diagram.is-open > :not(.is-active):not(.oc-dg-pop) {
    filter: blur(10px);
    opacity: .5;
    pointer-events: none;
}
.oc-diagram-label.is-active {
    z-index: 4;
}
.oc-dg-point.is-active {
    z-index: 4;
}

/* Popup — Figma node 244:1516: 417x290 card, icon sits in its top corner */
.oc-dg-pop {
    position: absolute;
    z-index: 3;
    left: calc(var(--px) * var(--u) - 12.28px);
    top: calc(var(--py) * var(--u) - 10.33px);
    width: 417px;
    min-height: 290px;
    padding: 20.36px 35px 36px 97px; /* text column 285px as in Figma */
    border-radius: 36px 9px 8px 9px;
    background: #fff;
    box-shadow: 0 4px 19px rgba(0,0,0,.08);
    text-align: left;
    opacity: 0;
    transform: scale(.94);
    transform-origin: 40px 40px;
    transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.oc-dg-pop[hidden] {
    display: none;
}
.oc-dg-pop.is-visible {
    opacity: 1;
    transform: none;
}
.oc-dg-pop.is-right {
    left: calc((var(--px) + var(--ps)) * var(--u) + 12.28px - 417px);
    padding: 20.36px 97px 36px 35px;
    border-radius: 9px 36px 9px 8px;
    transform-origin: calc(100% - 40px) 40px;
}
.oc-dg-pop-close {
    position: absolute;
    top: 17.7px;
    left: 360.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background .25s, transform .3s;
}
.oc-dg-pop.is-right .oc-dg-pop-close {
    left: 20.7px;
}
.oc-dg-pop-close img {
    width: 15.96px;
    height: 15.46px;
}
.oc-dg-pop-close:focus-visible {
    outline: 2px solid var(--oc-primary);
}
.oc-dg-pop h3 {
    font-family: var(--oc-font-serif);
    font-size: 25px;
    line-height: 60px;
    letter-spacing: -.75px;
    color: #363131;
}
.oc-dg-pop.is-right h3 {
    padding-left: 40px;
} /* clears the close button, now on the left */
.oc-dg-pop-body p {
    margin-top: 5.6px;
    font-size: 15px;
    line-height: 24px;
    color: #2f2f31;
}
.oc-dg-more {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 27.6px;
    font-family: var(--oc-font-serif);
    font-size: 15px;
    color: #3a3a3a;
}
.oc-dg-more img {
    width: 13.17px;
    height: 11.63px;
    transition: transform .3s;
}
.oc-dg-more:hover {
    color: var(--oc-green);
}
.oc-dg-more:hover img {
    transform: translateX(4px);
}

/* Entrance sequence (JS adds .is-seq, then .is-in when the diagram scrolls into
   view, and removes both once it has played). The tower builds up floor by floor,
   then each facility in turn: its line draws out from the building, the icon
   pops in and the label slides in. --d is the facility's place in the order. */
.oc-diagram [data-dg="1"],
.oc-dg-line--1 {
    --d: 0;
}
.oc-diagram [data-dg="2"],
.oc-dg-line--2 {
    --d: 1;
}
.oc-diagram [data-dg="3"],
.oc-dg-line--3 {
    --d: 2;
}
.oc-diagram [data-dg="4"],
.oc-dg-line--4 {
    --d: 3;
}
.oc-diagram [data-dg="5"],
.oc-dg-line--6 {
    --d: 4;
}
.oc-diagram [data-dg="6"],
.oc-dg-line--5 {
    --d: 5;
}
.oc-diagram [data-dg="7"],
.oc-dg-line--7 {
    --d: 6;
}
/* the hidden start state applies instantly (no fade-out flash on load) */
.oc-diagram.is-seq:not(.is-in) > * {
    transition: none;
}
/* Tower: revealed floor by floor from the ground up. The top edge of the clip
   follows the floor lines of the drawing: flat across the left face (to 45.6%
   of the width) and rising 15.7% of the height across the right face. One step
   is one floor (about 65px of the 1484px-tall image = 4.38%), lined up with
   the floor lines of the drawing. */
.oc-diagram.is-seq .oc-dg-tower {
    clip-path: polygon(0% 120.5%, 45.6% 120.5%, 100% 104.8%, 100% 100%, 0% 100%);
}
.oc-diagram.is-seq .oc-dg-line {
    clip-path: inset(0 100% 0 0); /* lines to the right of the building draw left to right */
}
.oc-diagram.is-seq .oc-dg-line--1,
.oc-diagram.is-seq .oc-dg-line--2,
.oc-diagram.is-seq .oc-dg-line--3,
.oc-diagram.is-seq .oc-dg-line--6 {
    clip-path: inset(0 0 0 100%); /* left-side lines (and the mirrored one) draw from the building outwards */
}
.oc-diagram.is-seq .oc-dg-point {
    opacity: 0;
    transform: scale(.3);
}
.oc-diagram.is-seq .oc-diagram-label {
    opacity: 0;
    transform: translateX(-14px);
}
.oc-diagram.is-seq .oc-diagram-label.is-right {
    transform: translateX(14px);
}
.oc-diagram.is-seq.is-in .oc-dg-tower {
    animation: ocTowerBuild 2s steps(27, end) forwards;
}
@keyframes ocTowerBuild {
    to {
        clip-path: polygon(0% 2.24%, 45.6% 2.24%, 100% -13.46%, 100% 100%, 0% 100%);
    }
}
.oc-diagram.is-seq.is-in .oc-dg-line {
    clip-path: inset(0);
    transition: clip-path .55s ease calc(var(--d) * .45s + 1.9s);
}
.oc-diagram.is-seq.is-in .oc-dg-point {
    opacity: 1;
    transform: none;
    transition: opacity .3s ease calc(var(--d) * .45s + 2.3s), transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--d) * .45s + 2.3s);
}
.oc-diagram.is-seq.is-in .oc-diagram-label {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease calc(var(--d) * .45s + 2.5s), transform .6s cubic-bezier(.22,1,.36,1) calc(var(--d) * .45s + 2.5s);
}
.oc-stats {
    display: grid;
    grid-template-columns: 260px 222px 222px 230px;
    justify-content: center;
    margin-top: 14px;
}
.oc-stat-num {
    font-size: 60px;
    font-weight: 300;
    line-height: 54px;
    letter-spacing: -1.2px;
    color: #3f3f46;
}
.oc-stat-label {
    margin-top: 24px;
    font-family: var(--oc-font-serif);
    font-size: 19.35px;
    font-weight: 300;
    line-height: 29px;
    letter-spacing: -.3px;
    color: #484343;
}

/* ==========================================================================
   Innovation hubs — 985px
   ========================================================================== */
.oc-hubs {
    padding: 112px 0 95px;
    background: #f4f4fd;
}
.oc-hubs-title {
    font-family: var(--oc-font-serif);
    font-size: 39px;
    line-height: 60px;
    letter-spacing: -1.17px;
    color: #363131;
    text-align: center;
}
.oc-hubs-body {
    display: flex;
    align-items: flex-start;
    margin-top: -15.5px;
}
.oc-map {
    --u: calc(100cqw / 474.4);
    flex: 0 0 474.4px;
    aspect-ratio: 474.4 / 733;
    margin-left: 16px;
}
.oc-map-label {
    display: flex;
    align-items: center;
    height: calc(31.94 * var(--u));
    padding-left: calc(13.4 * var(--u));
    border: 1px solid #d9d6d6;
    border-radius: calc(6 * var(--u));
    background: #f8f8f8;
    box-shadow: 10px 4px 20px 5px rgba(0,0,0,.07);
    font-family: var(--oc-font-serif);
    font-size: calc(15 * var(--u));
    font-weight: 500;
    letter-spacing: -.45px;
    color: #6e6e6e;
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1), color .35s, border-color .35s, background .35s, box-shadow .35s;
}
.oc-map-label.is-active {
    border-color: rgba(47,48,146,.45);
    background: #fff;
    color: var(--oc-primary);
    box-shadow: 0 8px 24px rgba(47,48,146,.16);
}
.oc-map-label[data-hub], .oc-map-pin {
    cursor: pointer;
}
.oc-map-pin img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
}
.oc-map-pin.is-active img {
    transform: translateY(calc(-3 * var(--u))) scale(1.18);
}
/* Ground ripple under the active pin */
.oc-map-ripple, .oc-map-ripple::after {
    position: absolute;
    left: 50%;
    bottom: calc(-4 * var(--u));
    width: calc(40 * var(--u));
    height: calc(14 * var(--u));
    margin-left: calc(-20 * var(--u));
    border-radius: 50%;
    border: 2px solid var(--oc-primary);
    opacity: 0;
    pointer-events: none;
}
.oc-map-ripple::after {
    content: '';
    left: 0;
    bottom: 0;
    margin: -2px;
}
.oc-map-pin.is-active .oc-map-ripple {
    animation: ocRipple 1.8s ease-out infinite;
}
.oc-map-pin.is-active .oc-map-ripple::after {
    animation: ocRipple 1.8s .6s ease-out infinite;
}
@keyframes ocRipple {
    0% {
        transform: scale(.3);
        opacity: .7;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}
/* Entrance sequence (enabled by JS): pins drop in one by one with their label and card */
.is-seq .oc-map-pin img {
    opacity: 0;
    transform: translateY(calc(-60 * var(--u))) scale(.6);
}
.is-seq .oc-map-pin.is-in img {
    opacity: 1;
    transform: none;
    transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
.is-seq .oc-map-pin.is-in.is-active img {
    transform: translateY(calc(-3 * var(--u))) scale(1.18);
}
.is-seq .oc-map-label {
    opacity: 0;
    transform: translateX(-14px);
}
.is-seq .oc-map-label.is-left {
    transform: translateX(14px);
}
.is-seq .oc-map-label.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease .25s, transform .6s cubic-bezier(.22,1,.36,1) .25s, color .35s, border-color .35s, background .35s, box-shadow .35s;
}
/* Upcoming location: shown faded (declared before the sequence rules so the
   hidden start state still wins while the cards animate in) */
.oc-hub-card.is-upcoming {
    opacity: .55;
}
.is-seq .oc-hub-card {
    opacity: 0;
    transform: translateX(60px);
}
.is-seq .oc-hub-card.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease .15s, transform .8s cubic-bezier(.22,1,.36,1) .15s, box-shadow .35s ease;
}
.is-seq .oc-hub-card.is-in:hover {
    transform: translateY(-4px);
    transition-delay: 0s;
}
.oc-hub-list {
    flex: 0 0 669.5px;
    margin: 74px 0 0 64.6px;
}
.oc-hub-card {
    position: relative;
    display: flex;
    height: 190.7px;
    border-radius: 7px;
    background: rgba(255,255,255,.99);
    box-shadow: 0 4px 32px 2px rgba(0,0,0,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.oc-hub-card + .oc-hub-card {
    margin-top: 33px;
}
.oc-hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px 2px rgba(0,0,0,.12);
}
/* Active location: accent line runs along the bottom of the card */
.oc-hub-card::after {
    content: '';
    position: absolute;
    left: 204.9px;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 0 0 7px 0;
    background: var(--oc-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.oc-hub-card.is-active {
    box-shadow: 0 14px 40px 2px rgba(47,48,146,.14);
}
/* Upcoming location: fades in with the sequence, then rests faded */
.is-seq .oc-hub-card.is-upcoming.is-in {
    opacity: .55;
}
.oc-hub-card.is-active::after {
    transform: scaleX(1);
}
.oc-hub-img {
    flex: 0 0 204.9px;
    height: 190.35px;
    border-radius: 7px;
    overflow: hidden;
}
.oc-hub-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.oc-hub-body {
    flex: 1;
    padding: 31.5px 26px 0 28.8px;
}
.oc-hub-body h3 {
    font-family: var(--oc-font-serif);
    font-size: 23px;
    font-weight: 500;
    line-height: 24px;
    color: #2e2f79;
}
.oc-hub-body > p {
    margin: 4.8px 0 0 1.9px;
    font-size: 17px;
    line-height: 27px;
    letter-spacing: -.17px;
    color: #605a6b;
}
.oc-hub-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 5px;
}
.oc-hub-row p {
    max-width: 294px;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: -.15px;
    color: #3d3d3f;
}
.oc-more {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 2px;
    font-family: var(--oc-font-serif);
    font-size: 15px;
    color: #3a3a3a;
    white-space: nowrap;
}
.oc-more svg {
    width: 13px;
    height: 12px;
    transition: transform .3s;
}
.oc-more:hover {
    color: var(--oc-green);
}
.oc-more:hover svg {
    transform: translateX(4px);
}

/* ==========================================================================
   Bleed sliders (Slick): the first slide starts at the container gutter,
   the track runs off the right edge of the viewport, and once moved the
   slides run edge-to-edge on both sides.
   ========================================================================== */
/* Extra padding keeps card shadows / hover lift from being clipped */
/* --oc-bleed-end: space kept after the last slide when the slider reaches its end */
.oc-bleed {
    --oc-bleed-end: 60px;
    overflow: hidden;
    padding-top: 12px;
    padding-bottom: 50px;
    margin-bottom: -50px;
}
.oc-bleed .slick-list {
    overflow: visible;
    padding-left: var(--oc-bleed-start, var(--oc-gutter)) !important;
}
.oc-bleed .slick-track {
    margin-left: 0;
}
.oc-bleed .slick-slide {
    margin-right: var(--oc-slide-gap, 24px);
}
.oc-bleed .slick-list.dragging, .oc-bleed .slick-list.draggable {
    cursor: grab;
}
.oc-bleed .slick-list.dragging {
    cursor: grabbing;
}
.oc-bleed:not(.slick-initialized) .js-bleed:not(.slick-initialized) {
    display: flex;
    gap: var(--oc-slide-gap, 24px);
    padding-left: var(--oc-bleed-start, var(--oc-gutter));
}
.oc-bleed .js-bleed:not(.slick-initialized) > * {
    flex: 0 0 auto;
}

/* ==========================================================================
   A Workplace Designed for People — 723px
   ========================================================================== */
.oc-work {
    padding: 82px 0 76px;
}
.oc-work-title {
    font-family: var(--oc-font-serif);
    font-size: 41px;
    line-height: 60px;
    color: #363131;
}
.oc-work-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.oc-work-arrows {
    display: flex;
    flex: none;
    gap: 12px;
}
/* Slider (Slick, same bleed behaviour as the other sliders): starts at the
   container edge, runs off the right edge of the screen */
.oc-work-carousel {
    margin-top: 51px;
}
.oc-work-slider {
    --oc-slide-gap: 22px;
    --oc-bleed-start: calc(max(0px, (100% - var(--oc-container-max)) / 2) + var(--oc-gutter) - 2px);
}

.oc-gallery-card {
    position: relative;
    display: block;
    height: 442px;
    border-radius: 9px;
    overflow: hidden;
}
.oc-gallery-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.oc-gallery-card:hover > img {
    transform: scale(1.06);
}
.oc-gallery-shade {
    position: absolute;
    inset: 0;
}
.oc-gallery-grad {
    position: absolute;
    left: 2px;
    right: 0;
    bottom: 0;
    height: 269px;
    border-radius: 7px;
    background: linear-gradient(213.7deg, rgba(27,27,27,0) 48%, rgba(27,27,27,.6) 96%);
}
.oc-gallery-label {
    position: absolute;
    left: 34.5px;
    bottom: 46px;
    width: calc(100% - 100px);
    font-family: var(--oc-font-serif);
    font-size: 30px;
    line-height: 37px;
    color: #fff;
}
.oc-gallery-arrow {
    position: absolute;
    bottom: 68px;
    right: 43px;
    width: 26px;
    height: 26px;
    transition: transform .3s;
}
.oc-gallery-card:hover .oc-gallery-arrow {
    transform: translate(3px, -3px);
}
/* ==========================================================================
   Why Sri Lanka (dark) — 904px
   ========================================================================== */
.oc-whysl {
    padding: 111px 0 99px;
    background: linear-gradient(225deg, #22236b 4.6%, #101043 92.8%);
    color: #fff;
}
.oc-whysl-grid {
    display: flex;
    align-items: flex-start; /* photo and text start level at every width */
}
.oc-whysl-media {
    flex: 0 0 669px;
    margin-left: 4px;
}
.oc-whysl-media img {
    display: block;
    width: 100%;
    height: auto;
}
.oc-whysl-copy {
    flex: 1;
    margin-left: 76px;
    /* padding-top: 42.7px; */
}
.oc-whysl-copy h2 {
    width: 505px;
    font-family: var(--oc-font-serif);
    font-size: 39px;
    font-weight: 500;
    line-height: 57px;
    letter-spacing: -1.17px;
    color: #fff;
}
/* Features: one list, two per row, a divider line above every row after the first */
.oc-whysl-list {
    display: grid;
    grid-template-columns: 269px minmax(0, 1fr);
    margin: 69.4px 0 0 11px;
}
.oc-whysl-list .oc-feature {
    padding-bottom: 12px;
}
.oc-whysl-list .oc-feature:nth-child(n+3) {
    margin-top: 15px;
    padding-top: 36px;
    border-top: 1px solid rgba(255,255,255,.3);
}
.oc-feature-icon {
    display: flex;
    align-items: flex-end;
    height: 50px;
}
.oc-feature-icon img {
    width: auto;
    height: auto;
    max-width: 60px;
    max-height: 50px;
}
.oc-feature h4 {
    max-width: 240px;
    margin-top: 20px;
    font-family: var(--oc-font-serif);
    font-size: 22px;
    line-height: 31px;
    letter-spacing: -.22px;
    color: #fff;
    width: 140px;
}
.oc-feature p {
    max-width: 255px;
    margin-top: 10px;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: -.15px;
    color: #b3b2b4;
}

/* ==========================================================================
   Workspace Solutions — 1057px
   ========================================================================== */
.oc-sol {
    padding: 81px 0 119px;
    background: #f4f4fd;
}
/* Second Inquire button below the slider: tablet / mobile only */
.oc-sol-foot {
    display: none;
}
.oc-sol-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.oc-sol-head h2 {
    width: 672px;
    margin-left: 9px;
    font-family: var(--oc-font-serif);
    font-size: 40px;
    line-height: 60px;
    letter-spacing: -.4px;
    color: #363131;
}
.oc-btn-inquire {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 249px;
    height: 56.15px;
    margin: 28.85px 2px 0 0;
    border-radius: 6px;
    background: var(--oc-primary);
    color: #fff;
    font-family: var(--oc-font-serif);
    font-size: 20px;
    font-weight: 500;
}
.oc-sol-carousel {
    margin-top: 43px;
}
.oc-sol-slider {
    --oc-slide-gap: 32px;
    --oc-bleed-start: calc(max(0px, (100% - var(--oc-container-max)) / 2) + var(--oc-gutter) + 4.2px);
}

/* Slider arrows: white circles with theme-blue arrows */
.oc-carousel-arrow {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--oc-primary);
    box-shadow: 0 8px 26px rgba(20,20,60,.16);
    transition: background .3s, color .3s, opacity .3s, transform .3s, box-shadow .3s;
}
.oc-carousel-arrow svg {
    width: 20px;
    height: 20px;
    transition: transform .3s;
}
.oc-carousel-arrow--prev:hover svg {
    transform: translateX(-3px);
}
.oc-carousel-arrow--next:hover svg {
    transform: translateX(3px);
}
.oc-carousel-arrow:focus-visible {
    outline: 2px solid var(--oc-primary);
    outline-offset: 3px;
}
.oc-carousel-arrow.is-disabled {
    opacity: .45;
    box-shadow: 0 4px 14px rgba(20,20,60,.08);
    cursor: default;
    pointer-events: none;
}
.oc-sol-img {
    height: 436px;
    border-radius: 20px;
    overflow: hidden;
}
.oc-sol-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.oc-sol-item:hover .oc-sol-img img {
    transform: scale(1.06);
}
.oc-sol-card {
    display: flex;
    flex-direction: column;
    min-height: 228px;
    margin: 17.67px 0 0;
    padding: 31.5px 24px 30px 24.2px;
    border-radius: 14px;
    background: rgba(255,255,255,.99);
    box-shadow: 0 4px 32px 2px rgba(0,0,0,.08);
}
.oc-sol-card h3 {
    font-family: var(--oc-font-serif);
    font-size: 23px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -.46px;
    color: #1f2568;
    white-space: nowrap;
}
.oc-sol-card p {
    width: 351px;
    max-width: 100%;
    margin: 15.7px 0 0 1.5px;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: -.15px;
    color: #3d3d3f;
}
.oc-explore {
    display: inline-flex;
    align-self: flex-start;
    margin: auto 0 0 1.5px;
    padding-top: 18px;
    align-items: center;
    gap: 13px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    color: var(--oc-primary);
}
.oc-explore svg, .oc-readmore svg {
    width: 12px;
    height: 11px;
    transition: transform .3s;
}
.oc-explore:hover, .oc-readmore:hover {
    color: var(--oc-green);
}
.oc-explore:hover svg, .oc-readmore:hover svg {
    transform: translateX(4px);
}

/* ==========================================================================
   Client Testimonials — Figma 1288 x 830. Laid out with grid + flex (no
   absolute positioning); every size scales with the container via --u
   (1 Figma px). The title overlaps the photo by sharing its grid cell.
   ========================================================================== */
.oc-testi > .oc-container {
    container-type: inline-size;
}
.oc-testi-grid {
    --u: calc(100cqw / 1288);
    display: grid;
    grid-template-columns: calc(784.4 * var(--u)) calc(404 * var(--u));
    column-gap: calc(69.86 * var(--u));
    align-items: start;
    margin-left: calc(-19.31 * var(--u));
    padding-bottom: calc(80.12 * var(--u));
}
.oc-testi-title {
    grid-area: 1 / 1;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(61 * var(--u));
    height: calc(382 * var(--u));
    margin: calc(83.07 * var(--u)) 0 0 calc(6.01 * var(--u));
    font-family: var(--oc-font-serif);
    font-size: calc(42 * var(--u));
    line-height: calc(61 * var(--u));
    letter-spacing: -.42px;
    color: #2b2c35;
    white-space: nowrap;
    pointer-events: none;
}
.oc-testi-title h2 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.oc-testi-main {
    grid-area: 1 / 1;
    min-width: 0;
}
/* Featured testimonial: photo, then the text column overlapping its right side */
.oc-testi-feature .oc-testi-slide {
    display: flex;
    align-items: flex-start;
}
.oc-testi-photo {
    flex: 0 0 calc(500.3 * var(--u));
    align-self: flex-end; /* photo sits on the bottom of the slide */
}
.oc-testi-photo img {
    display: block;
    width: 100%;
    height: auto;
}
.oc-testi-body {
    display: flex;
    flex: 0 0 calc(423.56 * var(--u));
    flex-direction: column;
    margin-left: calc(-139.46 * var(--u));
    padding-top: calc(110.72 * var(--u));
}
.oc-testi-quote {
    display: flex;
    align-items: flex-start;
    gap: calc(11.75 * var(--u));
    text-align: right;
    font-style: italic;
    font-size: calc(29 * var(--u));
    line-height: calc(43 * var(--u));
    letter-spacing: -.58px;
    color: #3b3e51;
}
.oc-testi-quote img {
    flex: none;
    width: calc(94.71 * var(--u));
    height: calc(70 * var(--u));
    margin-top: calc(6.16 * var(--u));
    transform: scaleY(-1);
}
.oc-testi-quote blockquote {
    flex: 1;
    min-width: 0;
}
.oc-testi-name {
    margin-top: calc(51 * var(--u));
    padding-right: calc(12 * var(--u));
    text-align: right;
    font-family: var(--oc-font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: calc(24 * var(--u));
    line-height: calc(42 * var(--u));
    color: #4c4e5b;
}
.oc-testi-role {
    margin-top: calc(-11 * var(--u));
    padding-right: calc(11.9 * var(--u));
    text-align: right;
    font-style: italic;
    font-size: calc(19 * var(--u));
    line-height: calc(42 * var(--u));
    color: #4c4e5b;
}
.oc-testi-logo {
    align-self: flex-end;
    width: calc(216.48 * var(--u));
    height: calc(48 * var(--u));
    margin: calc(41.16 * var(--u)) calc(12.35 * var(--u)) 0 0;
}
.oc-testi-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
}
.oc-testi-dots {
    margin: calc(47.98 * var(--u)) 0 0 calc(322.41 * var(--u));
}
/* Right column: tag and the review card stack */
.oc-testi-side {
    grid-column: 2;
    grid-row: 1;
    padding-top: calc(110.72 * var(--u));
}
.oc-testi-tag {
    margin-left: calc(1.35 * var(--u));
    font-style: italic;
    font-weight: 600;
    font-size: calc(41 * var(--u));
    line-height: calc(50 * var(--u));
    letter-spacing: -.41px;
    color: rgba(62,63,103,.39);
    white-space: nowrap;
}
/* Card stack: all cards share one grid cell, so the stack is as tall as the
   tallest card. Each card takes a slot from data-pos:
   0 = front, 1 = next card peeking behind (Figma back card peeks 73px right),
   2 = waiting behind (hidden), out = the card that just left (flies off left). */
.oc-testi-stack {
    --peek-x: calc(98.5 * var(--u));
    --peek-s: .874;
    display: grid;
    width: calc(404 * var(--u));
    min-height: calc(483 * var(--u));
    margin-top: calc(32.16 * var(--u));
    touch-action: pan-y;
    user-select: none;
}
.oc-testi-stack > * {
    grid-area: 1 / 1;
}
.oc-testi-card {
    display: flex;
    flex-direction: column;
    padding: calc(44.64 * var(--u)) calc(58.9 * var(--u)) calc(38 * var(--u)) calc(40.01 * var(--u));
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 44px rgba(0,0,0,.1);
    transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .6s ease, filter .6s ease;
}
.oc-testi-card[data-pos="0"] {
    z-index: 3;
    transform: none;
    opacity: 1;
}
.oc-testi-card[data-pos="1"] {
    z-index: 2;
    transform: translateX(var(--peek-x)) scale(var(--peek-s));
    filter: blur(1px);
    opacity: 1;
}
.oc-testi-card[data-pos="2"] {
    z-index: 1;
    transform: translateX(calc(var(--peek-x) * 1.5)) scale(calc(var(--peek-s) - .1));
    filter: blur(2px);
    opacity: 0;
}
.oc-testi-card[data-pos="out"] {
    z-index: 4;
    transform: translateX(calc(-150 * var(--u))) rotate(-5deg) scale(.95);
    opacity: 0;
    pointer-events: none;
}
.oc-testi-card:not([data-pos="0"]) {
    pointer-events: none;
}
.oc-testi-card-text {
    font-size: calc(20 * var(--u));
    line-height: calc(32 * var(--u));
    letter-spacing: -.2px;
    color: #3d3d3f;
}
/* name and role stop short of the arrows on the right */
.oc-testi-card-name,
.oc-testi-card-role {
    max-width: calc(225 * var(--u));
}
.oc-testi-card-name {
    margin-top: auto;
    padding: calc(40 * var(--u)) 0 0 calc(1.34 * var(--u));
    font-style: italic;
    font-size: calc(24 * var(--u));
    line-height: calc(42 * var(--u));
    letter-spacing: -.48px;
    color: #283478;
}
.oc-testi-card-role {
    margin-top: calc(-10.27 * var(--u));
    padding-left: calc(1.34 * var(--u));
    font-style: italic;
    font-size: calc(19 * var(--u));
    line-height: calc(42 * var(--u));
    letter-spacing: -.38px;
    color: #8a8c9a;
}
.oc-testi-nav {
    z-index: 5;
    display: flex;
    align-self: end;
    justify-self: start;
    gap: calc(7.6 * var(--u));
    margin: 0 0 calc(54 * var(--u)) calc(270.72 * var(--u));
}
.oc-testi-nav button {
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    transition: transform .2s;
}
.oc-testi-nav img {
    width: 100%;
    height: 100%;
}
.oc-testi-dots .slick-dots {
    position: static;
    display: flex;
    gap: calc(27 * var(--u));
    margin: 0;
    padding: 0;
    list-style: none;
}
.oc-testi-dots .slick-dots li {
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
    margin: 0;
}
.oc-testi-dots .slick-dots button {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #d9d9d9;
    font-size: 0;
    transition: background .3s;
}
.oc-testi-dots .slick-dots .slick-active button {
    background: #4f5070;
}

/* ==========================================================================
   Discover What's New — 731px
   ========================================================================== */
.oc-disc {
    padding: 54.5px 0 94.5px;
    overflow: hidden;
}
/* On screens wider than the container the left column follows the centred container */
.oc-disc-flex {
    display: flex;
    align-items: flex-start;
    padding-left: max(0px, (100% - var(--oc-container-max)) / 2);
}
.oc-disc-head {
    flex: 0 0 calc(var(--oc-gutter) + 341.6px);
    padding: 24.3px 0 0 calc(var(--oc-gutter) + .2px);
}
.oc-disc-head h2 {
    width: 282px;
    font-family: var(--oc-font-serif);
    font-size: 38px;
    line-height: 50px;
    letter-spacing: -.38px;
    color: #4c4c58;
}
.oc-disc-head p {
    width: 251px;
    margin: 35px 0 0 1px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -.18px;
    color: #3d3d3f;
}
.oc-disc-carousel {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: -12px;
}
.oc-disc-slider {
    --oc-slide-gap: 34px;
    --oc-bleed-start: 0px;
    overflow: visible;
}
.oc-disc-slider .slick-list {
    overflow: hidden;
    padding-left: 6px !important;
    margin-left: -6px;
}
.oc-news-img {
    display: block;
    height: 424px;
    border-radius: 13px;
    overflow: hidden;
}
.oc-news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.oc-news-card:hover .oc-news-img img {
    transform: scale(1.05);
}
.oc-news-meta {
    margin-left: 0;
}
.oc-news-meta time {
    display: block;
    margin-top: 18px;
    font-family: var(--oc-font-serif);
    font-size: 15px;
    line-height: 30px;
    letter-spacing: -.15px;
    color: #6b6a6c;
}
.oc-news-card h3 {
    margin-top: 8px;
    font-family: var(--oc-font-serif);
    font-size: 17px;
    line-height: 27px;
    color: #2e2e31;
}
.oc-readmore {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    font-size: 13px;
    letter-spacing: 1.95px;
    text-transform: uppercase;
    color: var(--oc-primary);
}

/* ==========================================================================
   RFQ — dark band 764px, panel 1288 x 684 overlapping the footer by 60px
   ========================================================================== */
.oc-rfq {
    padding-top: 140px;
    z-index: 2;
}
.oc-rfq-bgimg {
    position: absolute;
    top: 25.25px;
    left: calc(50% + 47.09px);
    width: 805.9px;
    height: 1090.75px;
    max-width: none;
    mix-blend-mode: luminosity;
    pointer-events: none;
}
/* Dark band stops where the footer begins; the panel keeps overlapping it */
.oc-rfq-clip {
    position: absolute;
    inset: 0 0 60px 0;
    overflow: hidden;
    background: linear-gradient(227.6deg, #22236b 4.6%, #101043 92.8%);
}
.oc-rfq .oc-container {
    position: relative;
}
/* Panel 1288 x 684: form column + photo (photo starts at 817.3px, as in Figma) */
.oc-rfq-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36.55%;
    min-height: 684px;
    margin: 0 0 -60px -1.8px;
    border-radius: 24px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(6px);
}
.oc-rfq-body {
    padding: 81.9px 83.9px 60px 73.5px;
}
.oc-rfq-photo {
    border-radius: 20px;
    overflow: hidden;
}
.oc-rfq-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60.7% center;
}
.oc-rfq-text h2 {
    margin-left: 8.2px;
    font-family: var(--oc-font-serif);
    font-size: 35px;
    line-height: 50px;
    letter-spacing: -.35px;
    color: #4c4c58;
}
.oc-rfq-text p {
    max-width: 560px;
    margin: 11.5px 0 0 6.6px;
    font-size: 18px;
    line-height: 30px;
    color: #2f2d32;
}

/* ---------- Contact Form 7 markup ----------
   Works with CF7's own output: .wpcf7-form-control-wrap spans, the submit
   <input>, spinner, validation tips and response box. The <p>/<br> tags CF7's
   auto-formatting may add are neutralised, so the layout holds either way. */
.oc-rfq .wpcf7 .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    border: 0;
    word-wrap: normal;
}
.oc-rfq .wpcf7 .hidden-fields-container {
    display: none;
}
.oc-rfq-form br {
    display: none;
}
.oc-rfq-form p:empty {
    display: none;
}
.oc-cf-grid > p, .oc-cf-field > p, .oc-cf-float > p, .oc-cf-seats > p, .oc-cf-actions > p {
    display: contents;
}

/* Fields grid: 314.8 | 328.7 columns, 63px rows (Figma) */
.oc-cf-grid {
    display: grid;
    grid-template-columns: 314.8fr 328.7fr;
    column-gap: 16.4px;
    row-gap: 16px;
    margin-top: 28.6px;
}
.oc-cf-field {
    position: relative;
    display: flex;
    height: 63px;
    border: 1px solid #a29c9c;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 4px 23px rgba(0,0,0,.1);
    transition: border-color .25s, box-shadow .25s;
}
.oc-cf-field:focus-within {
    border-color: var(--oc-primary);
    box-shadow: 0 4px 23px rgba(47,48,146,.14);
}
.oc-cf-field:has(.wpcf7-not-valid) {
    border-color: #d63638;
}
.oc-cf-field:has(.wpcf7-not-valid-tip) {
    margin-bottom: 20px; /* room for the error message under the field */
}

/* Floating label: sits in the field like a placeholder, moves up small on focus or once filled */
.oc-cf-float {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.oc-rfq-form .wpcf7-form-control-wrap {
    position: static;
    display: block;
    height: 100%;
}
.oc-cf-label {
    position: absolute;
    top: 50%;
    left: 22px;
    z-index: 1;
    max-width: calc(100% - 30px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 18px;
    line-height: 1.2;
    color: #514f4f;
    transform: translateY(-50%);
    pointer-events: none;
    transition: top .2s ease, left .2s ease, font-size .2s ease, color .2s ease, transform .2s ease;
}
.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: 11px;
    left: 18px;
    font-size: 13px;
    color: #787575;
    transform: none;
}
.oc-cf-float:focus-within .oc-cf-label {
    color: var(--oc-primary);
}
.oc-cf-input {
    display: block;
    width: 100%;
    height: 100%;
    padding: 21px 18px 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-family: var(--oc-font-sans);
    font-size: 19px;
    color: #000;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
}
select.oc-cf-input {
    padding-right: 60px;
    cursor: pointer;
}
input[type=number].oc-cf-input {
    padding-right: 10px;
    -moz-appearance: textfield;
}
input[type=number].oc-cf-input::-webkit-outer-spin-button,
input[type=number].oc-cf-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* The form's small icons are CSS backgrounds, so the CF7 form template needs no image URLs */
.oc-cf-caret {
    position: absolute;
    top: 50%;
    right: 38px;
    width: 13px;
    height: 7px;
    margin-top: -2px;
    background: url(../img/home/imgVector18.svg) no-repeat center / 100% 100%;
    pointer-events: none;
}

/* Phone: country picker (intl-tel-input, every country with its flag and dial
   code). The selected country reads like the design: round flag, arrow, divider,
   "(+94)", then the field. custom.js keeps --oc-phone-offset (the space the
   picker takes) on the field so the floating label starts after the dial code. */
.oc-cf-field--phone .iti {
    display: block;
    width: 100%;
    height: 100%;
    --iti-arrow-color: #1f1d1d;
    --iti-arrow-width: 9px;
    --iti-arrow-height: 5px;
    --iti-arrow-padding: 11px;
    --iti-border-color: #e3e1ea;
    --iti-hover-color: rgba(51,52,121,.06);
    --iti-dialcode-color: #8a8797;
}
.oc-cf-field--phone .iti__country-container {
    padding: 0;
}
.oc-cf-field--phone .iti__selected-country {
    border-radius: 7px 0 0 7px;
}
.oc-cf-field--phone .iti__selected-country-primary {
    height: calc(100% - 6px);
    padding: 0 14px 0 22px;
    border-right: 1px solid #d9d6d6;
}
/* Selected flag: a sharp round SVG flag (circle-flags, set by custom.js as --oc-flag), 26px */
.oc-cf-field--phone .iti__selected-country .iti__flag {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    box-shadow: none;
    background-image: var(--oc-flag);
    background-position: center;
    background-size: 100% 100%;
}
.oc-cf-field--phone .iti__selected-dial-code {
    margin: 0 18px 0 15px; /* the right margin is the gap before the typed number / label */
    font-size: 18px;
    color: #1f1d1d;
}
.oc-cf-field--phone .iti__selected-dial-code::before {
    content: '(';
}
.oc-cf-field--phone .iti__selected-dial-code::after {
    content: ')';
}
.oc-rfq-form .oc-cf-field--phone .oc-cf-float .oc-cf-label {
    left: var(--oc-phone-offset, 22px);
    color: #6e6b6b;
}
/* Country list */
.iti__dropdown-content {
    border-radius: 8px;
    font-family: var(--oc-font-sans);
    font-size: 15px;
    color: #1f1d1d;
}
.iti--inline-dropdown .iti__dropdown-content {
    min-width: 320px;
    margin-top: 6px;
    box-shadow: 0 10px 34px rgba(20,20,60,.16);
    overflow: hidden;
}
.iti--inline-dropdown .iti__country-list {
    max-height: 260px;
}
.iti__search-input {
    height: 44px;
    font-size: 15px;
    outline: 0;
}
.iti__country {
    padding: 9px 12px;
}
.iti__country.iti__highlight {
    color: var(--oc-primary);
}

/* Seats: number field + stepper buttons (192.8 + 8 + 63 + 2.5 + 63) */
.oc-cf-seats {
    display: flex;
    min-width: 0;
}
.oc-cf-seats .oc-cf-field {
    flex: 1 1 auto;
    min-width: 0;
}
.oc-seat-btn {
    display: flex;
    flex: 0 0 63px;
    align-items: center;
    justify-content: center;
    height: 63px;
    margin-left: 8px;
    border: 1px solid #dfdfdf;
    border-radius: 7px;
    background-color: #4c566b;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 23px rgba(0,0,0,.1);
    transition: background-color .3s;
}
.oc-seat-btn + .oc-seat-btn {
    margin-left: 2.5px;
}
.oc-seat-btn--plus {
    background-image: url(../img/home/imgPlusA.svg);
    background-size: 16.4px 17.4px;
}
.oc-seat-btn--minus {
    background-image: url(../img/home/imgPlusB.svg);
    background-size: 16.4px 2px;
}

/* Validation tip (CF7 appends it inside the wrap, after the control) */
.oc-rfq-form .wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    left: 2px;
    margin-top: 5px;
    font-size: 12px;
    line-height: 14px;
    color: #d63638;
    white-space: nowrap;
}

.oc-rfq-consent {
    margin: 17.4px -11px 0 4.5px;
    font-size: 14px;
    line-height: 31px;
    color: #2f2d32;
} /* runs 11px past the fields, as in Figma */
.oc-rfq-consent a {
    text-decoration: underline;
}
.oc-rfq-consent a:hover {
    color: var(--oc-green);
}

.oc-cf-actions {
    display: flex;
    align-items: center;
    margin: 20.3px 0 0 1.1px;
}
.oc-rfq-form .oc-btn-submit {
    width: 295px;
    height: 62.7px;
    padding: 0 20px;
    border: 0;
    border-radius: 5px;
    background: var(--oc-primary);
    color: #fff;
    font-family: var(--oc-font-serif);
    font-size: 21px;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .3s;
}
.oc-rfq-form .oc-btn-submit:disabled {
    opacity: .7;
    cursor: wait;
}
/* CF7 spinner: hidden until the form is submitting */
.oc-rfq .wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0 0 0 18px;
    border: 3px solid rgba(47,48,146,.2);
    border-top-color: var(--oc-primary);
    border-radius: 50%;
    background: none;
    opacity: 1;
    animation: ocSpin .8s linear infinite;
}
.oc-rfq .wpcf7-spinner::before {
    content: none;
}
.oc-rfq .wpcf7 form.submitting .wpcf7-spinner {
    visibility: visible;
}
@keyframes ocSpin {
    to {
        transform: rotate(360deg);
    }
}

/* CF7 response message */
.oc-rfq .wpcf7 form .wpcf7-response-output {
    margin: 18px 0 0 1px;
    padding: 12px 16px;
    border: 1px solid #d9d6d6;
    border-radius: 7px;
    font-size: 15px;
    line-height: 22px;
}
.oc-rfq .wpcf7 form.init .wpcf7-response-output,
.oc-rfq .wpcf7 form.resetting .wpcf7-response-output,
.oc-rfq .wpcf7 form.submitting .wpcf7-response-output {
    display: none;
}
.oc-rfq .wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    background: rgba(70,180,80,.07);
    color: #1e6b27;
}
.oc-rfq .wpcf7 form.invalid .wpcf7-response-output,
.oc-rfq .wpcf7 form.unaccepted .wpcf7-response-output,
.oc-rfq .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffb900;
    background: rgba(255,185,0,.08);
    color: #6b4f00;
}
.oc-rfq .wpcf7 form.failed .wpcf7-response-output,
.oc-rfq .wpcf7 form.aborted .wpcf7-response-output,
.oc-rfq .wpcf7 form.spam .wpcf7-response-output {
    border-color: #d63638;
    background: rgba(214,54,56,.06);
    color: #8a1f21;
}

/* ==========================================================================
   Footer — 790px
   ========================================================================== */
.oc-footer {
    background: #211d1d;
    color: #fff;
}
/* Two columns in normal flow. Spacing reproduces the Figma frame (790px tall at
   1512): each line keeps its Figma position through line-height + margin. */
.oc-footer-stage {
    display: flex;
}
.oc-footer-col--left {
    flex: 0 0 660px;
    padding: 142.9px 0 113px 3.2px;
}
.oc-footer-col--right {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    margin: 103px 0 74px;
    padding: 58px 38px 11.2px 70.3px;
    border-left: 1px solid rgba(255,255,255,.2);
}

/* Left column */
.oc-f-title {
    width: 497.7px;
    max-width: 100%;
    font-size: 45px;
    line-height: 58px;
    color: #fff;
}
.oc-f-hotline p,
.oc-f-contact p,
.oc-f-follow p {
    font-size: 16px;
    line-height: 24px;
    color: #b2adad;
    white-space: nowrap;
}
.oc-f-hotline {
    margin-top: 37px;
}
.oc-f-hotline p {
    font-size: 22px;
    line-height: 30px;
}
.oc-f-phone {
    display: block;
    width: fit-content;
    margin-top: 3px;
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
    color: #fff;
    white-space: nowrap;
}
.oc-f-contacts {
    display: flex;
    margin-top: 44.1px;
}
.oc-f-contact {
    flex: 0 0 256px;
}
.oc-f-contact + .oc-f-contact {
    flex: 0 1 auto;
}
.oc-f-mail {
    display: block;
    width: fit-content;
    margin: 4px 0 0 .8px;
    font-size: 22px;
    line-height: 30px;
    color: #fff;
    white-space: nowrap;
}
.oc-f-phone:hover,
.oc-f-mail:hover,
.oc-f-legal a:hover,
.oc-f-copy a:hover {
    color: var(--oc-green-light);
}
.oc-f-follow {
    margin-top: 55px;
}
.oc-f-social {
    display: flex;
    align-items: center;
    margin-top: 16.3px;
}
.oc-f-social a {
    color: #fff;
    font-size: 22px;
    line-height: 1;
    transition: color .3s;
}
.oc-f-social a + a {
    margin-left: 44px;
    font-size: 23.5px;
}
.oc-f-social a:last-child {
    margin-left: 42px;
    font-size: 24px;
}
.oc-f-social a:hover {
    color: var(--oc-green-light);
}
.oc-f-legal {
    display: flex;
    gap: 46px;
    margin: 57.7px 0 0 .8px;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}

/* Right column */
.oc-f-loc-title {
    margin-left: -3px;
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
}
.oc-f-locations {
    margin-top: 46.9px;
}
.oc-f-location {
    display: flex;
    align-items: center;
    gap: 24px;
}
.oc-f-location + .oc-f-location {
    margin-top: 50px;
}
.oc-f-location-info {
    flex: 1 1 auto;
    min-width: 0;
}
.oc-f-location-info h4 {
    font-size: 18px;
    line-height: 30px;
    white-space: nowrap;
}
.oc-f-location-info p {
    max-width: 298px;
    margin-top: 2px;
    font-size: 16px;
    line-height: 30px;
    color: #b2adad;
}
.oc-f-icons {
    display: flex;
    flex: none;
    gap: 15.8px;
}
.oc-f-icons a,
.oc-f-icons span {
    width: 41.1px;
    height: 41.1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: #9d9999;
    font-size: 14px;
}
.oc-f-icons a {
    transition: background .3s, border-color .3s;
}
.oc-f-icons a:hover {
    border-color: var(--oc-green);
    background: var(--oc-green);
}
.oc-f-icons a:hover img {
    filter: brightness(0) invert(1);
}
/* a span is a phone / map button without a link (e.g. an upcoming location) */
.oc-f-icons span {
    opacity: .2;
}
.oc-f-icons > :first-child img {
    width: 13.5px;
    height: 13.5px;
} /* phone icon: Figma size (the width/height attributes are rounded) */
.oc-f-copy {
    margin-top: auto;
    padding-top: 40px;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
    white-space: nowrap;
}

/* 404 page */
.error-page h1 {
    font: bold 120px/58px var(--oc-font-sans);
}
.error-page h4 {
    font: bold 50px/58px var(--oc-font-sans);
    text-align: center;
    margin: 100px 0;
    color: var(--oc-primary);
}

/* Contact Form 7 (kept for the CMS build) */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-color: #ff0000;
    text-align: center;
    margin: 25px 0 0;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    text-align: center;
    margin: 15px 0 0;
}

/* ==========================================================================
   Hover system — links turn logo green; buttons fill green with a sweep
   from the left, lift slightly and glow. Keyboard focus gets the same look.
   ========================================================================== */
/* Filled buttons: the green layer sweeps in over the brand blue */
.oc-btn-getstarted,
.oc-btn-hero,
.oc-btn-inquire,
.oc-rfq-form .oc-btn-submit,
.oc-btn-outline {
    background-image: linear-gradient(var(--oc-green), var(--oc-green));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0% 100%;
    transition: background-size .5s cubic-bezier(.22,1,.36,1), color .3s, border-color .3s, transform .3s ease, box-shadow .3s ease;
}
.oc-btn-getstarted:hover, .oc-btn-getstarted:focus-visible,
.oc-btn-hero:hover, .oc-btn-hero:focus-visible,
.oc-btn-inquire:hover, .oc-btn-inquire:focus-visible,
.oc-rfq-form .oc-btn-submit:hover, .oc-rfq-form .oc-btn-submit:focus-visible,
.oc-btn-outline:hover, .oc-btn-outline:focus-visible {
    background-size: 100% 100%;
    color: #fff;
    box-shadow: 0 10px 24px rgba(11,148,68,.3);
    outline: none;
}
.oc-btn-outline:hover, .oc-btn-outline:focus-visible {
    border-color: var(--oc-green);
}
.oc-btn-outline svg {
    transition: transform .3s ease;
}
.oc-btn-outline:hover svg {
    transform: translateX(4px);
}
.oc-btn-getstarted:active, .oc-btn-hero:active, .oc-btn-inquire:active,
.oc-rfq-form .oc-btn-submit:active, .oc-btn-outline:active {
    box-shadow: 0 4px 12px rgba(11,148,68,.25);
}

/* Round buttons: fill green, grow a little */
.oc-carousel-arrow:hover, .oc-carousel-arrow:focus-visible {
    background: var(--oc-green);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(11,148,68,.35);
}
.oc-seat-btn {
    transition: background-color .3s, border-color .3s, transform .25s ease, box-shadow .3s;
}
.oc-seat-btn:hover, .oc-seat-btn:focus-visible {
    background-color: var(--oc-green);
    border-color: var(--oc-green);
    box-shadow: 0 8px 18px rgba(11,148,68,.3);
}
.oc-seat-btn:active {
    transform: scale(.96);
}
.back-to-top {
    transition: background .3s, transform .3s ease, box-shadow .3s;
}
.back-to-top:hover, .back-to-top:focus-visible {
    background: var(--oc-green);
    box-shadow: 0 10px 22px rgba(11,148,68,.4);
}
.oc-testi-nav button {
    border-radius: 50%;
    transition: background .3s, transform .25s ease;
}
.oc-testi-nav button img {
    transition: filter .3s;
}
.oc-testi-nav button:hover, .oc-testi-nav button:focus-visible {
    background: var(--oc-green);
    transform: scale(1.12);
}
.oc-testi-nav button:hover img, .oc-testi-nav button:focus-visible img {
    filter: brightness(0) invert(1);
}
.oc-dg-pop-close img {
    transition: filter .3s;
}
.oc-dg-pop-close:hover, .oc-dg-pop-close:focus-visible {
    background: var(--oc-green);
    transform: rotate(90deg);
}
.oc-dg-pop-close:hover img, .oc-dg-pop-close:focus-visible img {
    filter: brightness(0) invert(1);
}

/* Other interactive bits */
.oc-dg-point:hover::after {
    border-color: var(--oc-green);
}
.oc-gallery-label, .oc-gallery-arrow {
    transition: color .3s, transform .6s cubic-bezier(.22,1,.36,1);
}
.oc-gallery-arrow {
    transition: transform .3s, stroke .3s;
}
#mob-menu-btn span {
    transition: background .3s, transform .3s, opacity .3s;
}
#mob-menu-btn:hover span {
    background: var(--oc-green);
}

/* ==========================================================================
   Content styles (moved out of the markup)
   Text tags (h1-h6, p, blockquote) carry no classes or inline styles: they
   are styled through their parent, so CMS / WYSIWYG content picks up the
   design. Positions of illustrated pieces use the stage variables
   (--x / --y / --w / --h in Figma px) set here instead of inline.
   ========================================================================== */

/* Text wrappers: the wrapper carries the typography, the plain tag inherits it */
.oc-why-title > *,
.oc-hubs-title > *,
.oc-work-title > *,
.oc-testi-title > *,
.oc-testi-quote > *,
.oc-testi-name > *,
.oc-testi-role > *,
.oc-testi-tag > *,
.oc-testi-card-text > *,
.oc-testi-card-name > *,
.oc-testi-card-role > *,
.oc-rfq-consent > *,
.oc-f-title > *,
.oc-f-loc-title > *,
.oc-f-copy > * {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* ---------- Why choose Orion City: one size rule for every icon and label ---------- */
.oc-why-icon img {
    width: auto;
    height: auto;
    max-width: 60px;
    max-height: 64px;
}
.oc-why-item p {
    max-width: 170px;
}

/* ---------- Facilities diagram ---------- */
.oc-dg-tower {
    --x: 377.62;
    --y: 0;
    --w: 548.235;
    --h: 742;
}
.oc-dg-line--1 {
    --x: 328.94;
    --y: 223.09;
    --w: 133.24;
    --h: 46.673;
}
.oc-dg-line--2 {
    --x: 842.9;
    --y: 207.08;
    --w: 133.24;
    --h: 46.673;
}
.oc-dg-line--3 {
    --x: 334.2;
    --y: 367.14;
    --w: 147.565;
    --h: 1;
}
.oc-dg-line--4 {
    --x: 814.54;
    --y: 357.64;
    --w: 147.565;
    --h: 1;
}
.oc-dg-line--5 {
    --x: 812.26;
    --y: 493.77;
    --w: 147.565;
    --h: 1;
}
.oc-dg-line--6 {
    --x: 360.34;
    --y: 526.45;
    --w: 89.226;
    --h: 1;
}
.oc-dg-line--7 {
    --x: 773.99;
    --y: 597.16;
    --w: 133.24;
    --h: 46.673;
}
/* Points: icon position + size (--w = --h) */
.oc-dg-point[data-dg="1"] {
    --x: 300.14;
    --y: 152;
    --w: 62.25;
    --h: 62.25;
}
.oc-dg-point[data-dg="2"] {
    --x: 950.31;
    --y: 136.03;
    --w: 57.66;
    --h: 57.66;
}
.oc-dg-point[data-dg="3"] {
    --x: 261.62;
    --y: 333.42;
    --w: 63.86;
    --h: 63.86;
}
.oc-dg-point[data-dg="4"] {
    --x: 971.88;
    --y: 327.33;
    --w: 59.48;
    --h: 59.48;
}
.oc-dg-point[data-dg="5"] {
    --x: 295.76;
    --y: 498.43;
    --w: 59.48;
    --h: 59.48;
}
.oc-dg-point[data-dg="6"] {
    --x: 940.29;
    --y: 467.03;
    --w: 59.48;
    --h: 59.48;
}
.oc-dg-point[data-dg="7"] {
    --x: 917.53;
    --y: 614.56;
    --w: 57.66;
    --h: 57.66;
}
/* Labels: 100 units wide, so two-word names wrap onto two lines (left-side labels are right-aligned) */
.oc-diagram-label {
    --w: 100;
}
.oc-diagram-label[data-dg="1"] {
    --x: 164.5;
    --y: 154;
}
.oc-diagram-label[data-dg="2"] {
    --x: 1022.56;
    --y: 140;
}
.oc-diagram-label[data-dg="3"] {
    --x: 143.62;
    --y: 341;
}
.oc-diagram-label[data-dg="4"] {
    --x: 1044;
    --y: 343.7;
}
.oc-diagram-label[data-dg="5"] {
    --x: 181.32;
    --y: 513.16;
}
.oc-diagram-label[data-dg="6"] {
    --x: 1016.81;
    --y: 481.75;
}
.oc-diagram-label[data-dg="7"] {
    --x: 993.34;
    --y: 630.79;
}

/* ---------- Innovation hubs map ---------- */
.oc-map-art {
    --x: 59.09;
    --y: 0;
    --w: 415.3;
    --h: 733;
}
.oc-map-label[data-hub="1"] {
    --x: 0.22;
    --y: 533.22;
    --w: 125.8;
}
.oc-map-label[data-hub="2"] {
    --x: 1.16;
    --y: 455.65;
    --w: 125.8;
}
.oc-map-label[data-hub="3"] {
    --x: 287.06;
    --y: 372.9;
    --w: 89.13;
    padding-left: calc(27.4 * var(--u));
}
.oc-map-pin {
    --w: 21.96;
    --h: 30.31;
}
.oc-map-pin[data-hub="1"] {
    --x: 109.9;
    --y: 542.37;
}
.oc-map-pin[data-hub="2"] {
    --x: 110.84;
    --y: 464.8;
}
.oc-map-pin[data-hub="3"] {
    --x: 282.55;
    --y: 382.05;
}

/* ---------- A Workplace Designed for People ---------- */
.oc-work-slider .oc-gallery-card {
    width: 305px;
}
.oc-gallery-shade {
    background: rgba(0,0,0,.1);
}
/* Hover: a soft overlay over the photo so the white label reads clearly */
.oc-gallery-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(18,18,40,.32);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.oc-gallery-card:hover::before,
.oc-gallery-card:focus-visible::before {
    opacity: 1;
}
.oc-gallery-label,
.oc-gallery-arrow {
    z-index: 2;
}

/* ---------- Workspace solutions ---------- */
.oc-sol-slider .oc-sol-item {
    width: 408px;
}
/* every card in the row takes the height of the tallest one */
.oc-sol-slider .slick-track {
    display: flex;
}
.oc-sol-slider .slick-slide {
    display: flex;
    flex-direction: column;
    height: auto;
}
.oc-sol-slider .oc-sol-card {
    flex: 1 0 auto;
}

/* ---------- Discover what's new ---------- */
.oc-disc-slider .oc-news-card {
    width: 296.4px;
}

/* ==========================================================================
   Preloader — shared shell + three styles (constellation / tower / reveal).
   custom.js tracks real loading progress (--p from 0 to 1), then adds
   .is-done to play the exit and removes the element.
   ========================================================================== */
html.oc-loading,
html.oc-loading body {
    overflow: hidden;
}
.oc-preloader {
    --p: 0;
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s ease, visibility .6s, transform .9s cubic-bezier(.76,0,.24,1), clip-path .9s cubic-bezier(.76,0,.24,1);
}
.oc-preloader.is-done {
    pointer-events: none;
}
.oc-pl-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: opacity .4s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.oc-preloader.is-done .oc-pl-inner {
    opacity: 0;
    transform: translateY(-16px);
}
.oc-pl-logo {
    width: 210px;
    opacity: 0;
    animation: ocPlUp .8s cubic-bezier(.22,1,.36,1) .2s forwards;
}
.oc-pl-logo img {
    display: block;
    width: 100%;
    height: auto;
}
.oc-pl-status {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #6b6b7b;
}
.oc-pl-count {
    min-width: 3.2em;
    text-align: left;
    color: var(--oc-primary);
    font-variant-numeric: tabular-nums;
}
.oc-pl-bar {
    width: 210px;
    height: 2px;
    margin-top: 14px;
    border-radius: 2px;
    background: rgba(51,52,121,.12);
    overflow: hidden;
}
.oc-pl-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--oc-primary), var(--oc-green));
    transform: scaleX(var(--p));
    transform-origin: left center;
}
.oc-pl-skip {
    position: absolute;
    bottom: 28px;
    left: 50%;
    padding: 8px 18px;
    border: 1px solid rgba(51,52,121,.25);
    border-radius: 30px;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--oc-primary);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .4s ease, transform .4s ease, visibility .4s, background .3s, color .3s;
}
.oc-preloader.can-skip .oc-pl-skip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.oc-pl-skip:hover,
.oc-pl-skip:focus-visible {
    border-color: var(--oc-green);
    background: var(--oc-green);
    color: #fff;
}
@keyframes ocPlUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 1) Constellation: Orion's belt lights up star by star on the night sky */
.oc-preloader--constellation {
    background: radial-gradient(circle at 50% 42%, #2a2b7a 0%, #101043 70%);
}
.oc-preloader--constellation.is-done {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.04);
}
.oc-pl-stars {
    width: 180px;
    height: 90px;
    margin-bottom: 26px;
    overflow: visible;
}
.oc-pl-star {
    fill: #fff;
}
.oc-pl-star path {
    opacity: 0;
    transform: scale(0) rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 6px rgba(140,160,255,.9));
    animation: ocPlStar .7s cubic-bezier(.34,1.56,.64,1) forwards, ocPlTwinkle 2.4s ease-in-out infinite;
}
.oc-pl-star--1 path {
    animation-delay: .1s, 1.2s;
}
.oc-pl-star--2 path {
    animation-delay: .55s, 1.6s;
}
.oc-pl-star--3 path {
    animation-delay: 1s, 2s;
}
.oc-pl-link {
    stroke: rgba(255,255,255,.45);
    stroke-width: 1;
    stroke-dasharray: 75;
    stroke-dashoffset: 75;
    animation: ocPlDraw .5s ease forwards;
}
.oc-pl-link--1 {
    animation-delay: .4s;
}
.oc-pl-link--2 {
    animation-delay: .85s;
}
.oc-preloader--constellation .oc-pl-logo {
    animation-delay: 1.2s;
}
.oc-preloader--constellation .oc-pl-logo img {
    filter: brightness(0) invert(1);
}
.oc-preloader--constellation .oc-pl-status {
    color: rgba(255,255,255,.6);
}
.oc-preloader--constellation .oc-pl-count {
    color: #fff;
}
.oc-preloader--constellation .oc-pl-bar {
    background: rgba(255,255,255,.15);
}
.oc-preloader--constellation .oc-pl-bar span {
    background: linear-gradient(90deg, #8f95ff, #3ed39a);
}
.oc-preloader--constellation .oc-pl-skip {
    border-color: rgba(255,255,255,.3);
    color: #fff;
}
@keyframes ocPlStar {
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes ocPlTwinkle {
    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(140,160,255,.9));
    }
    50% {
        filter: drop-shadow(0 0 14px rgba(170,190,255,1));
    }
}
@keyframes ocPlDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* 2) Tower: a small isometric tower builds floor by floor (like the facilities diagram) */
.oc-preloader--tower {
    background: #f4f4fb;
}
.oc-preloader--tower.is-done {
    transform: translateY(-100%);
}
.oc-pl-tower {
    display: flex;
    margin-bottom: 34px;
}
.oc-pl-face {
    display: block;
    width: 44px;
    height: 118px;
    background: linear-gradient(to top, #45d4a0 0%, #4f8fd6 55%, #5047d8 100%);
    -webkit-mask-image: repeating-linear-gradient(to top, #000 0 9px, transparent 9px 12px);
    mask-image: repeating-linear-gradient(to top, #000 0 9px, transparent 9px 12px);
    animation: ocPlBuild 2.2s steps(10) infinite;
}
.oc-pl-face--l {
    transform: skewY(22deg);
    transform-origin: right bottom;
    filter: brightness(.86);
}
.oc-pl-face--r {
    transform: skewY(-22deg);
    transform-origin: left bottom;
}
.oc-preloader--tower.is-ready .oc-pl-face {
    animation: none;
    clip-path: inset(0);
}
@keyframes ocPlBuild {
    0% {
        clip-path: inset(100% 0 0 0);
    }
    70%,
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* 3) Reveal: the logo fills with colour as the page loads, then a light sweeps across */
.oc-preloader--reveal {
    background: #fff;
}
.oc-preloader--reveal.is-done {
    clip-path: inset(0 0 100% 0);
}
.oc-pl-fill {
    display: grid;
    width: 260px;
}
.oc-pl-fill > * {
    grid-area: 1 / 1;
}
.oc-pl-fill img {
    display: block;
    width: 100%;
    height: auto;
}
.oc-pl-fill-base {
    filter: grayscale(1);
    opacity: .16;
}
.oc-pl-fill-color {
    clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0);
}
.oc-pl-shine {
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
    background-size: 250% 100%;
    background-position: 120% 0;
    -webkit-mask-image: url(../img/logo-orioncity.png);
    mask-image: url(../img/logo-orioncity.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.oc-preloader--reveal.is-ready .oc-pl-shine {
    animation: ocPlShine .9s ease forwards;
}
@keyframes ocPlShine {
    to {
        background-position: -20% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oc-pl-logo,
    .oc-pl-star path,
    .oc-pl-link {
        animation: none;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }
    .oc-pl-face {
        animation: none;
    }
}

/* ==========================================================================
   WordPress
   ========================================================================== */
/* Keep the fixed header below the admin toolbar when logged in */
.admin-bar .oc-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .oc-header {
        top: 46px;
    }
}
/* Fallback pages (index.php / 404.php) until their own templates exist */
.oc-page {
    padding: 80px 0 100px;
}
.oc-page-entry > h1 {
    margin-bottom: 24px;
    font-family: var(--oc-font-serif);
    font-size: 40px;
    line-height: 52px;
    color: #333479;
}
.oc-page-content > * + * {
    margin-top: 16px;
}
.oc-page--404 .oc-page-entry {
    text-align: center;
}
.oc-page--404 .oc-btn-outline {
    margin: 32px auto 0;
}
/* Inquiry form: note for editors while the CF7 form has not been created yet */
.oc-rfq-missing {
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px dashed #c9c6d6;
    border-radius: 8px;
    font-size: 14px;
    line-height: 22px;
    color: #6b6878;
}